如何使用setinterval自動化JavaScript/html交通燈序列？

Question

我是JavaScript新手，我正在試圖自動化這個交通燈序列。如果，如果else語句我用瓶坯的任務，但我無法自動化它，所以它會後，按一下按鈕連續運行：

function changelight(){ 

    if (current==colours[0]){ 
     var c = document.getElementById("myCanvas") 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95,50,40,10,12*Math.PI); 
     ctx.stroke(); 
     ctx.fillStyle = colours[0]; 
     ctx.fill(); 


     var c1 = document.getElementById("myCanvas") 
     var ctx1 = c1.getContext("2d"); 
     ctx1.beginPath(); 
     ctx1.arc(95,150,40,10,12*Math.PI); 
     ctx1.stroke(); 
     ctx1.fillStyle = colours[1]; 
     ctx1.fill(); 


     var c2 = document.getElementById("myCanvas") 
     var ctx2 = c2.getContext("2d"); 
     ctx2.beginPath(); 
     ctx2.arc(95,250,40,10,12*Math.PI); 
     ctx2.stroke(); 
     ctx2.fillStyle = colours[3]; 
     ctx2.fill(); 
     current=colours[4]; 
    } 

    else if (current==colours[4]){ 
     var c = document.getElementById("myCanvas") 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95,50,40,10,12*Math.PI); 
     ctx.stroke(); 
     ctx.fillStyle = colours[3]; 
     ctx.fill(); 


     var c1 = document.getElementById("myCanvas") 
     var ctx1 = c1.getContext("2d"); 
     ctx1.beginPath(); 
     ctx1.arc(95,150,40,10,12*Math.PI); 
     ctx1.stroke(); 
     ctx1.fillStyle = colours[3]; 
     ctx1.fill(); 


     var c2 = document.getElementById("myCanvas") 
     var ctx2 = c2.getContext("2d"); 
     ctx2.beginPath(); 
     ctx2.arc(95,250,40,10,12*Math.PI); 
     ctx2.stroke(); 
     ctx2.fillStyle = colours[2]; 
     ctx2.fill(); 
     current=colours[2]; 
    } 

    else if (current==colours[2]){ 
     var c = document.getElementById("myCanvas") 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95,50,40,10,12*Math.PI); 
     ctx.stroke(); 
     ctx.fillStyle = colours[3]; 
     ctx.fill(); 


     var c1 = document.getElementById("myCanvas") 
     var ctx1 = c1.getContext("2d"); 
     ctx1.beginPath(); 
     ctx1.arc(95,150,40,10,12*Math.PI); 
     ctx1.stroke(); 
     ctx1.fillStyle = colours[1]; 
     ctx1.fill(); 


     var c2 = document.getElementById("myCanvas") 
     var ctx2 = c2.getContext("2d"); 
     ctx2.beginPath(); 
     ctx2.arc(95,250,40,10,12*Math.PI); 
     ctx2.stroke(); 
     ctx2.fillStyle = colours[3]; 
     ctx2.fill(); 
     current=colours[1]; 
    } 

    else if (current==colours[1]){ 
     var c = document.getElementById("myCanvas") 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95,50,40,10,12*Math.PI); 
     ctx.stroke(); 
     ctx.fillStyle = colours[0]; 
     ctx.fill(); 


     var c1 = document.getElementById("myCanvas") 
     var ctx1 = c1.getContext("2d"); 
     ctx1.beginPath(); 
     ctx1.arc(95,150,40,10,12*Math.PI); 
     ctx1.stroke(); 
     ctx1.fillStyle = colours[3]; 
     ctx1.fill(); 


     var c2 = document.getElementById("myCanvas") 
     var ctx2 = c2.getContext("2d"); 
     ctx2.beginPath(); 
     ctx2.arc(95,250,40,10,12*Math.PI); 
     ctx2.stroke(); 
     ctx2.fillStyle = colours[3]; 
     ctx2.fill(); 
     current=colours[0]; 
    } 



    } 
    </script> 


     <br><br> 
     <button onclick="changelight()">Click</button> 

我知道我需要在使用setInterval做到這一點，但我有不知道該怎麼做。我以前的所有嘗試都失敗了，請幫忙。

Answer 1

我會清理一些東西......你可以將所有的繪圖移動到一個地方。然後使用啓動和停止功能。其實，你可以很容易地組合開始和結束，但我會把它留給你。在這裏你去：

function light(c) { 
 
    this.current = 0; 
 
    this.colors = ["green", "yellow", "red"]; 
 
    this.ctx = c.getContext("2d"); 
 
} 
 

 
light.prototype.draw = function() { 
 
    this.ctx.beginPath(); 
 
    this.ctx.arc(95, 50, 40, 0, 12 * Math.PI); 
 
    this.ctx.fillStyle = this.colors[this.current]; 
 
    this.ctx.fill(); 
 
} 
 

 
light.prototype.start = function() { 
 
    if(this.interval) 
 
    return; 
 
    this.draw(); 
 
    this.interval = setInterval(function() { 
 
    this.current = (this.current + 1) % this.colors.length; 
 
    console.log("drawing: ", this.colors[this.current]); 
 
    this.draw(); 
 
    }.bind(this), 3000); 
 
} 
 

 
light.prototype.stop = function() { 
 
    if (!this.interval) 
 
    return; 
 
    clearInterval(this.interval); 
 
    delete this.interval; 
 
} 
 

 
var myLight = new light(document.getElementById("myCanvas"));

<canvas id="myCanvas"></canvas> 
 
<button onclick="myLight.start()">start</button> 
 
<button onclick="myLight.stop()">stop</button>

Answer 2

我通常不會寫現成去的代碼，但有這麼多事情錯了你，我是......被迫。

功能：使用'em！不要複製粘貼相同的代碼，這是一個你做錯了的標誌！

setInterval引用一個函數。我不知道你的「以前的嘗試」是什麼，因爲你從來沒有打擾過告訴我們，但我會冒險猜測你寫了setInterval(changelight(), 1000)，並想知道爲什麼它只做了第一個。

您可以重新使用畫布上下文！只要得到它一次，並永遠吸取它！

在您的原始代碼中避免像這些colours[0]這樣的「幻數」。給一些有意義的名字，比如colours.red,colours.off，這樣你就可以很容易地找到並改變它們！

使用一個計數器來遍歷你的週期，不要依賴於相等的任意值。使用%運算符有效地創建給定長度的重複循環。

找到模式並利用它們。英國的紅綠燈分四步走：（紅色），（紅色+黃色），（綠色），（紅色）。美國是相似的，但沒有（紅色+黃色）步驟......我想他們喜歡測試人們的反應或其他東西。

把它放在一起，這是你會得到什麼：

var c = document.createElement('canvas'), 
 
    ctx = c.getContext('2d'); 
 

 
c.width = 150; 
 
c.height = 300; 
 
document.body.appendChild(c); 
 

 
var cycle = 0, 
 
    colours = { 
 
     red: "#cc0000", 
 
     yellow: "#cccc00", 
 
     green: "#00cc00", 
 
     off: "#333333" 
 
    }; 
 

 
function drawLight(id,colour) { 
 
    // avoid repetition, use a function! 
 
    ctx.fillStyle = colours[colour]; 
 
    ctx.beginPath(); 
 
    ctx.arc(95, 50 + 100*id, 40, 0, Math.PI*2); 
 
    ctx.fill(); 
 
    ctx.stroke(); 
 
} 
 

 
function changelight(){ 
 
    ctx.stokeStyle = "black"; 
 
    ctx.lineWidth = 3; 
 
    
 
    // top light: red if cycle = 0 or 1, off otherwise 
 
    drawLight(0, cycle <= 1 ? 'red' : 'off'); 
 
    
 
    // middle light: yellow if cycle = 3 (and 1 for UK lights, we have red+yellow before green), off otherwise 
 
    drawLight(1, cycle == 1 || cycle == 3 ? 'yellow' : 'off'); 
 
    
 
    // bottom light: green if cycle = 2 
 
    drawLight(2, cycle == 2 ? 'green' : 'off'); 
 
    
 
    // increment cycle 
 
    cycle = (cycle + 1) % 4; 
 
} 
 

 
// start the magic 
 
setInterval(changelight,1000);