我有一个PHP页面,它有3个JavaScript函数,并使用带有"onclick"的图像映射来更改图像和映射坐标,以便onclick运行下一个函数。
到目前为止,我的代码一直运行到最后一个函数的最后一个图像——我理解它。我试图实现的是在onclick之后在新坐标中一次调用一个函数。
如果每个函数调用的时间都有时间限制,这是可以的,但在这个时间限制之前,onclick可以运行下一个函数:
<img src=<?php echo 'image-start.jpg' ?> width="700" height="400"
usemap="#start" class="map" style="border-style:none; margin:0" id="imageX" />
<map id="start" name="start">
<area shape="poly" id="A" class="" title="Click to Start" onclick="myFunction_1()"
coords=<?php echo '"'; echo $coords_0; echo '"' ; ?>/>
<area shape="poly" id="B" class="" title="Click to Start" onclick="myFunction_1()"
coords=<?php echo '"'; echo $coords_0; echo '"' ; ?>/>
</map>
<script>
function myFunction_1() {
document.getElementById("imageX").src=" <?php echo 'image_1.jpg' ?> " ;
document.getElementById("A").coords= <?php echo '"'; echo $coords_1_a; echo '"' ; ?> ;
document.getElementById("A").onclick= myFunction_2() ;
document.getElementById("B").coords= <?php echo '"'; echo $coords_1_b; echo '"' ; ?> ;
document.getElementById("B").onclick= myFunction_2() ;
}
function myFunction_2() {
document.getElementById("imageX").src=" <?php echo 'image_2.jpg' ?> " ;
document.getElementById("A").coords= <?php echo '"'; echo $coords_2_a; echo '"' ; ?> ;
document.getElementById("A").onclick= myFunction_3() ;
document.getElementById("B").coords= <?php echo '"'; echo $coords_2_b; echo '"' ; ?> ;
document.getElementById("B").onclick= myFunction_3() ;
}
function myFunction_3() {
document.getElementById("imageX").src=" <?php echo 'image_end.jpg' ?> " ;
}
</script>
您可以使用setTimeout()
使一个函数在延迟后触发另一个函数——例如,将以下代码添加到myFunction_1将使myFunction_2在5秒(5000毫秒)内运行
setTimeout(myFunction_2, 5000)