1

Сделать на JS светофор основной (3 цвета) и связанный пешеходный (2 цвета) с кнопкой по запросу пешеходного перехода:

  1. основной включен на зеленый, пешеходный на красный
  2. по нажатию на запрос, через не менее чем 5 секунд на 5 секунд показывается желтый на основном, затем основной - красный, пешеходный зеленый на 15 секунд. После пешеходный на красный, основной сразу на зеленый.
  3. минимальное время зеленого на основном - 60 секунд. Если кнопка запроса перехода нажата ранее 60 секунд с момента включения зеленого - пункт 2 срабатывает через 60 секунд с момента включения зеленого.
  4. после нажатия запроса и до включения зеленого на основном светофоре, кнопка запроса игнорируется.

Часть задачи - сделать отображение светофоров, и кнопку. Кнопка всегда доступна к нажатию (не ставим атрибут disabled). Другая часть - реализовать асинхронную логику. По возможности на чистом JS (не прибегая к библиотекам).

Изучаю js и хочу сделать задачу, но не понимаю как с помощью js поменять цвет, если можно, разложите задачу на ещё большие кирпичики.

1 ответ 1

5

Цвет определяется CSS стилем (например определенным классом). на JS вы находите нужный элемент и добавляете или удаляете класс.

Ожидание реализуется функцией setTimeout

Для определения нажатости кнопки используем специальный флаг, который устанавливаем при нажатии на кнопку и сбрасываем при установке зеленого на главном

let lastActivate = 0;
let pushed = false;
document.getElementById('go').addEventListener('click', function() {
  if (pushed)
    return;
  pushed = true;
  const curDate = new Date();
  const wait = Math.max(
    60000 - (new Date().getTime() - lastActivate),
    5000
  );
  setTimeout(
    function() {
      document.querySelector('#main .active').classList.remove('active');
      document.querySelector('#main .yellow').classList.add('active');
      setTimeout(
        function() {
          document.querySelector('#main .active').classList.remove('active');
          document.querySelector('#main .red').classList.add('active');
          document.querySelector('#second .active').classList.remove('active');
          document.querySelector('#second .green').classList.add('active');
          setTimeout(
            function() {
              document.querySelector('#main .active').classList.remove('active');
              document.querySelector('#main .green').classList.add('active');
              document.querySelector('#second .active').classList.remove('active');
              document.querySelector('#second .red').classList.add('active');
              lastActivate = new Date().getTime();
              pushed = false;
            }, 15000
          );
        }, 5000
      );
    }, wait
  );
});
.lights {
  width: 50px;
  margin-right: 10px;
  float: left;
}

.red {
  background-color: #800000;
}

.red.active {
  background-color: #FF0000;
}

.yellow {
  background-color: #808000;
}

.yellow.active {
  background-color: #FFFF00;
}

.green {
  background-color: #008000;
}

.green.active {
  background-color: #00FF00;
}
<div id="main" class="lights">
  <div class="desc">Main</div>
  <div class="red">&nbsp;</div>
  <div class="yellow">&nbsp;</div>
  <div class="green active">&nbsp;</div>
</div>
<div id="second" class="lights">
  <div class="desc">Second</div>
  <div class="red active">&nbsp;</div>
  <div class="green">&nbsp;</div>
</div>
<button id="go">GO!</button>

0

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.