如何使用setinterval自动执行JavaScript/html交通灯序列?

本文介绍了如何使用setinterval自动执行JavaScript/html交通灯序列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我是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>