Блог

Главная - Вопросы по программированию - Установите таймер для освещения движения в 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>

Комментарии:

1. timer= setInterval(timerSet,1500); должно быть в событии щелчка, если вы хотите, чтобы это произошло только тогда

2. это, я написал: btn1.addEventListener(«щелчок»,набор таймеров).@ Патрикеваны

3. То есть вы устанавливаете прослушиватель событий, это не то же самое, что переместить вас setInterval в прослушиватель событий щелчка

Ответ №1:

Вам нужно переместить свое setInterval заявление в прослушиватель событий. В данный момент он у вас в глобальном пространстве, а это значит, что он сразу же запустится.

 btn1.addEventListener("click",startTimer)
let timer= null;
function startTimer(){
    timer = setInterval(timerSet,1500);
}

function timerSet(){
   /* ... */
}

Чтобы остановить, вы просто помещаете clearInterval вызов в другой прослушиватель щелчков

 btn2.addEventListener('click',stopTimer);
function stopTimer(){
    clearInterval(timer);
}

Ответ №2:

//если вы хотите отключить остановку света ==> добавьте этот код для функции остановки document.querySelector(".show").classList.remove("show") 

 const start = document.querySelector("#start");
const stop = document.querySelector("#stop");
const lights = document.querySelectorAll(".light");
var i = 0;
var trafic;
start.onclick = () => {
  trafic = setInterval(() => {
    var currentShowing = document.querySelector(".show");
    if (currentShowing) {
      currentShowing.classList.remove("show");
    }
    lights[i].classList.add("show");
    i == 2 ? (i = 0) : i  ;
  }, 1000);
};

stop.onclick = () => {
  clearInterval(trafic);
  //if you want to clear stop the light ==> document.querySelector(".show").classList.remove("show")
}; 
       .container-traficlight {
        display: flex;
        flex-direction: column;
        gap: 0.2rem;
        margin-top: 1rem;
      }

      .container-traficlight .light {
        position: relative;
        width: 2rem;
        height: 2rem;
        background-color: #010101;
        border-radius: 50%;
        filter: brightness(0%);
      }
      .container-traficlight .light.red {
        background-color: red;
      }
      .container-traficlight .light.orange {
        background-color: orange;
      }
      .container-traficlight .light.green {
        background-color: green;
      }
      .container-traficlight .light.show {
        filter: brightness(100%) !important;
      } 
  <button id="start">Start</button>
 <button id="stop">Stop</button>
  <div class="container-traficlight">
      <div class="light red"></div>
      <div class="light orange"></div>
      <div class="light green"></div>
  </div>

Ответ №3:

Вот мое решение, я надеюсь, Вы останетесь довольны. С наилучшими пожеланиями;)

 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>
Метки: