红绿灯序列Javascript答案

【问题标题】：Traffic light Sequence Javascript红绿灯序列Javascript
【发布时间】：2016-12-06 17:31:47
【问题描述】：

这是我的交通信号灯序列代码。我想知道如何添加一个计时器以每 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>

【问题讨论】：

setInterval(changeLights,3000)...
你的老师教过你setTimeout或setInterval吗？
stackoverflow.com/questions/36920320/…stackoverflow.com/questions/34653900/…stackoverflow.com/questions/37906626/…stackoverflow.com/questions/35920989/…stackoverflow.com/questions/31747318/…stackoverflow.com/questions/37796563/…
我们可以自动将“交通灯序列”问题标记为重复问题吗？
当然，随意

标签： javascript html

【解决方案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>

【讨论】：

谢谢，非常感谢！！
如果您不介意，您可以通过点击投票按钮下方的绿色复选标记来接受我的答案。

【解决方案2】：

你可以用 setTimeout(function, time); 设置一个静态定时器

在您的情况下，如果您希望每 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);

希望对你有帮助

【讨论】：

谢谢，这真的很有帮助！