汽車按鈕週期

我能夠得到按鈕的工作點擊延遲使其半自動，但我需要它不會暫停後點擊一下。這是我迄今爲止所擁有的。汽車按鈕週期

<!DOCTYPE html> 
<html> 
<body> 
    <h1>JavaScript</h1> 
    <img id="light" src="./assets/red.jpg"> 
    <button onClick="changeLights(changelights, 1000)">Change Lights</button> 
    <button onClick="clearInterval(changeLights)">Stop 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]; 
    } 
    setInterval(nxt,200); 

    </script> 
</body> 
</html>

來源

2017-03-22 DMC

此代碼不會做你說什麼它。 'nxt'沒有在任何地方定義。 –

'changeLights（changelights，1000）'這也是不正確的。 – Amy

任何方式我可以解決這個問題，因爲那是別人告訴我的 – DMC

如果我理解正確的，你希望用戶能夠點擊一個按鈕，開始通過圖像循環，並通過點擊另一個按鈕停止。這裏是基於你的代碼做的代碼。我已經展示了它爲2倍的圖像，但它會爲更長的名單以及工作...

var keepgoing = false; 
 
var list = [ 
 
    "https://s22.postimg.org/84255zdkt/bulboff.jpg", 
 
    "https://s22.postimg.org/5b8xlyd8d/bulbon.jpg" 
 
]; 
 
var index = 0; 
 
var image = document.getElementById('light'); 
 

 
function startLights() { 
 
    if (keepgoing) return; 
 
    keepgoing = true; 
 
    changeLights(); 
 
} 
 

 
function changeLights() { 
 
    if (keepgoing) { 
 
    setTimeout(changeLights, 500); 
 
    index = (index + 1) % list.length; 
 
    image.src = list[index]; 
 
    } 
 
}

<div> 
 
    <button onClick="startLights();">Change Lights</button> 
 
    <button onClick="keepgoing = false;">Stop Lights!</button> 
 
</div> 
 
<img id="light" style="width:100px;" src="https://s22.postimg.org/84255zdkt/bulboff.jpg">

來源

2017-03-23 02:43:50 fmacdee

汽車按鈕週期

回答

相關問題