交通燈代碼

-4

下面是我的代碼...它工作完全正常，但...交通燈代碼

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<body> 
    <img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;"> 
    <button type="button" onclick="changetrafficlights()">Change Traffic Lights</button> 
<script> 
    var position = 0; 
    var list = ["Redlight.jpeg","RedAmberlight.jpeg","Greenlight.jpeg", "Amberlight.jpeg"]; 

    function changetrafficlights() 
     {position = position + 1;  
     if(position == list.length){ 
      position = 0; 
     } 
     var image = document.getElementById('trafficlights'); 
     image.src=list[position];} 
</script> 
</body> 
</html>

我試圖做一個JavaScript代碼將使用while循環或for循環中，將經過變量「列表」自動

來源

2016-09-30 dylan

什麼對您當前的代碼不起作用？什麼是問題？ –

Java！= JavaScript – shmosel

[循環和迭代文檔]（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration） –

您可以使用setInterval()爲下列方式：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<body> 
    <img id="trafficlights" src="Redlight.jpeg" style="width:128px;height:128px;"> 
    <button type="button" onclick="starttrafficlights()">Change Traffic Lights</button> 
    <button type="button" onclick="stoptrafficlights()">Stop Traffic Lights</button> 
<script> 
    var position = 1, id; 
    var list = ["Redlight.jpeg","RedAmberlight.jpeg","Greenlight.jpeg", "Amberlight"]; 
    function changetrafficlights(){ 
      stop = true; 
      var image = document.getElementById('trafficlights'); 
      image.src=list[position % list.length]; 
      position++; 
    } 
    function starttrafficlights(){ 
     id = setInterval(changetrafficlights, 1000); 
    } 
    function stoptrafficlights(){ 
     clearInterval(id); 
    } 
</script> 
</body> 
</html>

這會自動改變img指定後持續時間。

希望它幫助！

來源

2016-10-21 09:56:01

非常感謝你！ – dylan

回答

相關問題