Question

我一直在处理此代码，当按下按钮时，该代码会显示下一个红绿灯。现在我试图每隔3秒在图像中显示图像。我已经尝试在我的代码中使用setTimeOut，但我的代码juts保留在第一个红绿灯上。

代码： EDIT（FIXED）

 <!DOCTYPE html> 
<html> 
<body>  

  <h1>JavaScript Code</h1> 
  <p>Traffic Light</p> 

<img id="traffic" src="only red1.jpg">
  <button type="button" onclick="ChangeLight()">Change Light</button>  



  <script> 
    var list = ["only red1.jpg","red-yellow 2.jpg", "green3.jpg","yellowonly4.jpg"];
    var nextlight = 0;
    var timer;
    function ChangeLight() {
      nextlight = nextlight + 1;      
      if (nextlight == list.length) 
        nextlight = 0;      
      var firstlight = document.getElementById('traffic');     
      firstlight.src = list[nextlight]; 
    } 


     timer = setInterval(ChangeLight, 3000);
  </script>  
</body> 
</html>

Answer 1

您可能希望将timer = setTimeout("ChangeLight", 3000);更改为timer = setTimeout(ChangeLight, 3000);。

Answer 2

解决方案：

timer = setInterval("ChangeLight", 3000);

将其从函数^^

中取出

Answer 3

2件事：

它应该是setInterval(ChangeLight, 3000);
timer 内部 ChangeLight功能。你应该把它移到外面。

如何在JavaScript中为图像添加计时器？

3 个答案: