Сфетофор javascript

583

28 августа 2018, 11:40

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

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

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

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

Answer 1

Цвет определяется 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>