我是JavaScript的新手,我想自动化这个交通信号灯序列.我已经使用过if和if else语句来执行任务,但是我无法使其自动化,因此它将在单击按钮后继续运行:
I am new to JavaScript and i am tying to automate this traffic light sequence. I have used if and if else statements to preform the task but I am unable to automate it so it will continually run after one click of the button :
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来执行此操作,但是我不知道该如何执行.我以前的所有尝试都失败了,请帮忙.
I know I need to do it with setInterval but I have no idea how to do it. All my previous attempts have failed please help.
推荐答案我会整理一下...您可以将所有图形移动到一个位置.然后使用启动和停止功能.实际上,您可以轻松地将开始和停止结合起来,但是我会留给您.在这里,您去了:
I would clean things up a bit... you can move all the drawing to one place. Then use a start and stop function. Actually, you can easily combine the start and stop but I will leave that to you. Here you go:
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>
更多推荐
如何使用setinterval自动执行JavaScript/html交通灯序列?
发布评论