Question

我是JavaScript的新手，我想要自动化这个红绿灯序列。我已经使用if和if 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

我会稍微清理一下......你可以把所有的图画移到一个地方。然后使用启动和停止功能。实际上，您可以轻松地将开始和结束组合在一起，但我会将其留给您。你走了：

＆＃13;

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"));

＆＃13;

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

＆＃13;

Answer 2

我通常不会编写现成的代码，但是你有太多的错误，我被迫......不得不这样做。

功能：使用＆＃39; em！不要反复复制粘贴相同的代码，这表明你做错了！

setInterval接受对函数的引用。我不知道你之前的尝试＆＃34;因为你从来没有打扰过告诉过我们，但我会猜到你写了setInterval(changelight(), 1000)，并想知道为什么它只做了第一次。

您可以重复使用画布上下文！只要得到一次并永远吸取它！

避免＆＃34;魔术数字＆＃34;与原始代码中的这些colours[0]一样。提供有意义的名称，例如colours.red，colours.off，以便您可以根据需要轻松找到并更改它们。

使用计数器来循环你的周期，不要依赖于某些任意值的相等性。使用%运算符可以有效地创建给定长度的重复循环。

查找模式并利用它们。英国红绿灯分为四个步骤:(红色），（红色+黄色），（绿色），（红色）。美国是相似的，但没有（红色+黄色）步骤...我猜他们喜欢测试人的反应或其他东西。

把它们放在一起，这就是你得到的：

＆＃13;

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);

＆＃13;

如何使用setinterval自动化JavaScript / html流量灯序列？

2 个答案: