Semáforo en JavaScript

Tengo ООН pequeño problema: DOS Debo realizar semáforos, параграф la Calle uno параграф la Calle 2 uno 1 года, teniendo en cuenta que mientras esté Верде en la Calle 1 en la Calle 2 debe estar rojo y наоборот.

Tengo ООН problema подставляет los intervalos de tiempo, фургон puesto que inician bien pero luego se Комо аччелерандо y casi se juntan, имеет к que se pierde la sincronización.

Les dejaré el código de la Calle 1 обманный HTML y JavaScript:

function start() {
  cambios();
}

function cambios() {

  var cont = 1;
  var bomb1;
  bomb1 = document.getElementById("bombillo1");

  function colorRojo() {
    if (cont == 1) {

      bomb1.style.background = "red";
      cont += 2;

    }
  }

  window.setInterval(colorRojo, 5000);
  window.clearInterval(colorRojo);

  function colorAmarillo() {

    if (cont == 2) {
      bomb1.style.background = "yellow";
      cont -= 1;
    }
  }
  window.setInterval(colorAmarillo, 5000);
  window.clearInterval(colorAmarillo);

  function colorVerde() {

    if (cont == 3) {

      bomb1.style.background = "green";
      cont -= 1;
    }
  }

  window.setInterval(colorVerde, 7000);
  window.clearInterval(colorVerde);
}
<!DOCTYPE html>
<html>
<head>
  <script src="js/jquery-3.1.1.min.js">
  </script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <script src="js/scripts.js">
  </script>
  <style>
    .bombillo {
      height: 150px;
      width: 150px;
      background-color: green;
      border-radius: 50%;
      margin: 25px auto;
      transition: background 300ms;
    }
  </style>
</head>
<body onload="start()">
  <div class="bombillo" id="bombillo1">
  </div>
  <div class="btn-group">
  </div>
</body>
</html>
7
задан 07.03.2017, 18:53
0 ответов