Форум

рони · #11 (**permalink**) 10.10.2013, 20:56

eko24,
переменная light работает на все светофоры поэтому получается ерунда у каждого должен быть свой хранитель.

рони · #12 (**permalink**) 10.10.2013, 21:09

eko24,

$.fn.plugin = function (b) {
    b.push(b[1]); //добавляем жёлтый в конец чтоб цепочка была непрерывной З Ж К Ж
    return this.each(function (f, d) {// перебираем все элементы
        var a = 0, // тотже light  хранит номер цвета на текущий момент
            e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],//цвета З Ж К Ж
            c = function () {
                $(d)
                    .css({
                        "background-color": e[a]   //установка фона
                    });
                window.setTimeout(c, 1000 * b[a]); //через сколько секунд сменить цвет
                a = ++a % 4 //установка номера  следующего цвета  бесконечная серия 1...2...3...0...1...2...3...0...
            };
        c()// первый запуск
    })
};

eko24 · #13 (**permalink**) 11.10.2013, 18:26

Спасибо )
А я вот все ломаю голову как сделать так, что бы можно было начинать работу с определённого цвета.
Можете с этим помочь ?

BETEPAH · #14 (**permalink**) 11.10.2013, 19:12

Сообщение от eko24

А я вот все ломаю голову как сделать так, что бы можно было начинать работу с определённого цвета.

в четвертой строчке последнего кода от рони

eko24 · #15 (**permalink**) 11.10.2013, 19:49

Да, но тогда все светофоры будут начинаться с красного.
Я просто не совсем понимаю принцип работы jQuery плагина, и мне нужно что бы этот параметр можно было передать при подключении плагина к определенному элементу, например:

$(".box").plugin([8,2,8],true);

где true отвечает за переменную begin_with_green, которая при значении true начинает работу с зеленого цвета, а при false начинает с красного .
Как то так

P.S.
И еще хочу спросить как взаимойдействовать с информацией(переменными), которая находиться в плагине jQuery.
Если я хочу достучаться до переменной у которой значение "2" вот отсюда?

$(".box").plugin([8,2,8]);

то как мне это сделать ?
А то уже перерыл кучу топиков по созданию jQuery плагинов, но что-то ни в одном из них не видел как объясняют про взаимодействие с переменными из плагинов.
Очень жду вашего ответа.

рони · #16 (**permalink**) 13.10.2013, 10:56

Сообщение от eko24

А я вот все ломаю голову как сделать так, что бы можно было начинать работу с определённого цвета.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
div{ height : 50px ; width : 50px; margin : 1px; background-color : black; border-radius : 25px; border: solid 1px #000;text-align:  center;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$.fn.plugin = function (b, k) {
    b.push(b[1]);
    return this.each(function (f, d) {
        var a = k ||0,
            e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],
            c = function () {
                $(d)
                    .css({
                        "background-color": e[a]
                    });
                window.setTimeout(c, 1E3 * b[a]);
                a = ++a % 4
            };
        c()
    })
};
</script>
<script type="text/javascript">
$(window).load(function(){
$(".box").plugin([8,2,8],2);//начать с красного
$(".too").plugin([2,2,2],1);//с жёлтого
});
</script>
  <title></title>
</head>
<body>
<div class="box">is box</div>[8,2,8],2
<div class="too">is too</div>[2,2,2],1
</body>
</html>

Vlasenko Fedor · #17 (**permalink**) 13.10.2013, 23:52

Мой маленький светофор. Учусь я

<!DOCTYPE html>
<html>
<head>
  <title>Светофор</title>
    <style>
        .table33 {
            width: 33%;
            float: left;
        }

        .signal {
            background-color: #000;
            padding: 5px;
            float: left;
        }

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

        .signal .active {
            opacity: 1;
        }

        .signal .red {
            background-color: red;
        }

        .signal .yellow {
            background-color: yellow;
        }

        .signal .green {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="table33">
    <ul id="signal1" class="signal">
        <li class="red"></li>
        <li class="yellow"></li>
        <li class="green"></li>
    </ul>
</div>
<div class="table33">
    <ul id="signal2" class="signal">
        <li class="red"></li>
        <li class="yellow"></li>
        <li class="green"></li>
    </ul>
</div>
<div class="table33">
    <ul id="signal3" class="signal">
        <li class="red"></li>
        <li class="yellow"></li>
        <li class="green"></li>
    </ul>
</div>
<script>
    window.onload = function () {

        var signal = function  (id, position, interval, reverse) {

            position = position || 0;
            interval = interval || 1000;


            this.start = function(){
                var li = document.getElementById(id).getElementsByTagName('li');
                li[position].className += ' active';
                reverse = reverse || false;

                this._timer = setInterval(function (){
                    for(i = 0; ; i++){
                        var class_name = li[i].className.split(' ');
                        if(class_name[1] == 'active'){
                            li[i].className = class_name[0];
                            if(i == 2){
                                i=0;
                                reverse = true;
                            } else if(i == 1 && reverse){
                                i = -1;
                                reverse = false;
                            }
                            li[++i % 3].className += ' '+class_name[1];

                            break;
                        }
                    }

                }, interval);
                return this;
            };

            this.stop = function() {
                clearInterval(this._timer);
                return this;
            };
        };

        var signal1 = new signal('signal1').start();
        var signal2 = new signal('signal2', 1).start();
        var signal3 = new signal('signal3', 2, 10000).start();

    }
</script>
</body>
</html>

eko24 · #18 (**permalink**) 18.10.2013, 01:39

Неплохо.
Если хотите усложнить себе задачку - реализируйте следующую визуализацию светофора:
зелёный>зелёный мигающий>жёлтый>красный>кр� �сный+жёлтый.
Потому что настоящий светофор работает именно так.

Vlasenko Fedor · #19 (**permalink**) 19.10.2013, 17:58

<!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) алгоритма

Форум

Справочник

Discord чат

Курсы javascript