Question

我制作了一个显示红绿灯的程序，按下按钮时颜色会改变。我不知道如何为此添加定时序列，有人可以帮忙吗？我的任务是允许序列在计时器上没有任何用户输入的情况下继续。

这是我原来的程序

<!DOCTYPE html> 
<html> 
<body>  
  <h1>Task 3</h1> 
  <p>Traffic Light</p> 
  <img id="light" src="./assets/red.jpg">
  <button type="button" onclick="changeLights()">Change</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>

我查看了计时事件并尝试使用setTimeout（）函数，但所有这些都会在每次按下按钮后添加延迟。

<!DOCTYPE html> 
<html> 
<body>  
  <h1>Task 3</h1> 
  <p>Traffic Light</p> 
  <img id="light" src="./assets/red.jpg">
  <button onclick="setTimeout(changeLights, 3000);">Try it</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>

我是JavaScript的新手，我不知道从哪里开始所以我很感激帮助。

Answer 1

我的任务是允许序列在计时器上没有任何用户输入的情况下继续。

您需要使用setInterval(func|code, delay)

删除此行

<button onclick="setTimeout(changeLights, 3000);">Try it</button>

并在脚本中添加

setInterval(changeLights, 3000);

只要你想在每setInterval毫秒后无限运行一个函数，就会使用

n。

Answer 2

你可以试试这个

<button onclick="setInterval(changeLights, 3000);">Try it</button>

Answer 3

也许你的意思是使用setInterval（）函数而不是setTimeout（）。

如何在JavaScript中循环我的程序的定时序列

3 个答案: