Question

这是我的红绿灯序列代码。我想知道如何添加计时器来每3秒更改一次红绿灯颜色，例如，单击按钮时。谢谢！

<!DOCTYPE html> 
<html> 
<body>  
  <h1>JavaScript Task 3</h1> 
  <p>This is  my Traffic Light script</p> 
  <img id="light" src="./assets/red.jpg">
  <button type="button" onclick="changeLights()">Change Lights</button>  
  <script> 
    var list = ["./assets/red.jpg","./assets/redamber.jpg", "./assets/green.jpg","./assets/amber.jpg" ];
    var index = 0;
    function changeLights() {
      index = index + 1;      
      if (index == list.length) 
        index = 0;      
      var image = document.getElementById('light');     
      image.src = list[index]; 
    } 
  </script>  
</body> 
</html>

Answer 1

使用setInterval功能。

第一个参数是您要调用的函数，第二个参数是应该调用的频率，以毫秒为单位。

var timer = setInterval(changeLights,3000);

var list = ["./assets/red.jpg","./assets/redamber.jpg",     "./assets/green.jpg","./assets/amber.jpg" ];
var index = 0;
function changeLights() {
     index = index + 1;      
if (index == list.length) 
index = 0;      
var image = document.getElementById('light');     
image.src=list[index]; } 
  var timer = setInterval(changeLights,3000);

<h1>JavaScript Task 3</h1> 
<p>This is  my Traffic Light script</p> 
<img id="light" src="./assets/red.jpg"> <button type="button" 
onclick="changeLights()">Change Lights</button>

Answer 2

您可以使用setTimeout（函数，时间）设置静态计时器;

在你的情况下，如果你想要每3秒钟一次重复计时器，你可以在每次changeLights（）函数结束时运行setTimeout

请参阅w3schools article on timing

var timer;
function changeLights() {
    index = index + 1;      
    if (index == list.length) 
    index = 0;      
    var image = document.getElementById('light');     
    image.src=list[index];

    timer = setTimeout("changeLights", 3000);
}

通过这种改变，一旦你启动灯光，该功能将每3秒重复一次。

计时器变量也允许您使用以下命令停止计时器（可能在您的情况下使用另一个按钮）：

clearTimeout(timer);

希望这有帮助

红绿灯序列Javascript

2 个答案: