Показать сообщение отдельно
  #19 (permalink)  
Старый 19.10.2013, 17:58
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,572

<!DOCTYPE HTML>
<html lang="ru">
  <head>
  <meta charset="utf-8"/>
    <title>Светофор. Автор - Федор Власенко</title>
    <style>
      .signal {
          background-color: #000;
          padding: 5px;
          float: left;
      }

      .signal div {
          list-style: none;
          height: 40px;
          width: 40px;
          border-radius: 50%;
          margin: 4px;
          opacity: 0.2;
      }

      .signal .active {
          opacity: 1;
      }
    </style>
  </head>
  
  <body>
    <div id="signal1" class="signal">
      <div></div>
      <div></div>
      <div></div>
    </div>
    <script type='text/javascript'>
      window.onload = function () {

          var traficLight = function (id, path) {

              var pathLength = path.length, point = 0;
              var signals = [], i, color, animTimer, element;
              var alls = document.getElementById(id).getElementsByTagName('div');

              for (i = 0; ; i += 1) {
                  color = ['red', 'yellow', 'green'][i % 3];
                  alls[i].style.background = color;
                  signals[color] = alls[i];
                  if (i == 2) break;
              }

              var start = function () {

                  point = (point > pathLength - 1) ? 0 : point;
                  element = path[point];

                  if (element.interval == 0) {
                      blink(element);
                  } else if (element.dual != '') {
                      signals[element.color].className = signals[element.dual].className = 'active';
                      show(element);
                  } else {
                      signals[element.color].className = 'active';
                      show(element);
                  }
                  point += 1;
              };

              var blink = function (element) {
                  i = 0;
                  animTimer = setInterval(function () {
                      signals[element.color].className = (signals[element.color].className == '') ? 'active' : '';
                      if (++i == 6) {
                          clearTimeout(animTimer);
                          start();
                      }
                  }, 500);
              };

              var show = function (element) {
                  animTimer = setInterval(function () {
                      clearTimeout(animTimer);
                      signals[element.color].className = '';
                      if (element.dual) signals[element.dual].className = '';
                      start();
                  }, element.interval);
              };

              start();
          };

          var signal = function (color, interval, dual) {
              this.color = color;
              this.interval = interval || 0;
              this.dual = dual || '';
          };

          var red = new signal('red', 5000);
          var redYellow = new signal('red', 2000, 'yellow');
          var yellow = new signal('yellow', 3000);
          var green = new signal('green', 5000);
          var greenBlink = new signal('green');
          var traficLight1 = new traficLight('signal1', [green, greenBlink, yellow, red, redYellow]);
      };
    </script>
  </body>

</html>

Попробовал, может кто подскажет лучше реализацию. Здесь основано на задании параметров каждой точки (point) алгоритма
Ответить с цитированием