红绿灯序列Javascript

时间:2016-04-28 16:22:28

标签: javascript html

这是我的红绿灯序列代码。我想知道如何添加计时器来每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>   

2 个答案:

答案 0 :(得分:2)

使用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>  

答案 1 :(得分:0)

您可以使用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);

希望这有帮助