时间戳

首页 > 解决方案 > 在 Javascript 中设置交通灯的计时器

javascript - 在 Javascript 中设置交通灯的计时器

问题描述

我想为我的交通灯设置一个带有两个按钮的计时器。一键启动。另一个停止。

我希望当用户点击开始按钮时，交通灯开始工作并改变他的颜色，当用户点击停止时，交通灯也停止工作。我有一个代码，它只是自动工作而不是按钮。（即使用户没有点击任何按钮，圆圈也会自动改变颜色）

我如何设置该职责的按钮？

<button id="btn1">start</button>
<button id="btn2">stop</button>
    <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>


        <script>
           
            const btn1=document.getElementById("btn1");
            const btn2=document.getElementById("btn2");
            const div1=document.getElementById("div1");
            const div2=document.getElementById("div2");
            const div3=document.getElementById("div3");
            
            
            btn1.addEventListener("click",timerSet)
            let timer= setInterval(timerSet,1500);
            

            function timerSet(){

    if(div1.style.backgroundColor=="red"){

    div2.style.backgroundColor="yellow";
    div1.style.backgroundColor="black";
    div3.style.backgroundColor="black";



}
else if(div2.style.backgroundColor=="yellow"){
    div3.style.backgroundColor="green";
    div2.style.backgroundColor="black";
    div1.style.backgroundColor="black";

}
else if (div3.style.backgroundColor=="green"){
    div1.style.backgroundColor="red";
    div3.style.backgroundColor="black";
}
                


            }
            

            

            
            Kreis(div1,20,"red");
            Kreis(div2,20,"black");
            Kreis(div3,20,"black");


            function Kreis(element,radius,farbe){

            element.style.backgroundColor=farbe;
            element.style.width=2*radius+"px";
            element.style.height=2*radius+"px";
            element.style.borderRadius=2*radius+"px";

}



            </script>

标签： javascript

解决方案

这是我的解决方案，希望您满意。此致;）

const btn1 = document.getElementById("btn1");
const btn2 = document.getElementById("btn2");
const div1 = document.getElementById("div1");
const div2 = document.getElementById("div2");
const div3 = document.getElementById("div3");

let timer = null;

btn1.addEventListener("click", startTimer);
btn2.addEventListener("click", stopTimer);

function timerSet() {
  if (div1.style.backgroundColor == "red") {
    div2.style.backgroundColor = "yellow";
    div1.style.backgroundColor = "black";
    div3.style.backgroundColor = "black";
  } else if (div2.style.backgroundColor == "yellow") {
    div3.style.backgroundColor = "green";
    div2.style.backgroundColor = "black";
    div1.style.backgroundColor = "black";
  } else if (div3.style.backgroundColor == "green") {
    div1.style.backgroundColor = "red";
    div3.style.backgroundColor = "black";
  }
}

function Kreis(element, radius, farbe) {
  element.style.backgroundColor = farbe;
  element.style.width = 2 * radius + "px";
  element.style.height = 2 * radius + "px";
  element.style.borderRadius = 2 * radius + "px";
}

function startTimer() {
  timer = setInterval(timerSet, 1500);
  Kreis(div1, 20, "red"), Kreis(div2, 20, "black"), Kreis(div3, 20, "black");
}

function stopTimer() {
  clearInterval(timer);
}
<button id="btn1">start</button>
<button id="btn2">stop</button>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>

推荐阅读