Форум

eko24 · #1 (**permalink**) 09.10.2013, 21:37

Всем доброго времени суток.
Я пробую написать скрипт, который будет симулировать работу светофора.
То есть:зеленый, желтый, красный, желтый, зеленый и все по новой.
То, что я пробовал делать можете посмотреть тут.
Вот только этот скрипт, который я сделал в виде функции начинает неправильно работать: для двух или большего кол-ва светофоров он начинает рандомно увеличивать время для красного,зеленого и желтого света. Хотя для одного светофора работает он нормально.
Идея в основном следующая:
сделать функцию которая будет использовать следующие аргументы:

идентификатор светофора
сколько секунд для зеленого
сколько секунд для желтого
сколько секунд для красного

И что бы в результате все эти функции выполнялись одновременно.
Если Вы сможете помочь в данной проблеме - буду очень благодарен.

P.S.
Так же нашел в интернете такой скрипт симуляции работы светофора. Работает он очень даже замечательно, вот только моих познаний джаваскрипта недостаточно что бы сделать из него функцию, так если Вы сможете помочь и в этом вопросе - моей благодарности будет в два раза больше :3

рони · #2 (**permalink**) 09.10.2013, 23:05

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) {
    b.push(b[1]);
    return this.each(function (f, d) {
        var a = 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]);
$(".too").plugin([2,2,2]);
});
</script>
  <title></title>
</head>
<body>
<div class="box">is box</div>[8,2,8]
<div class="too">is too</div>[2,2,2]
</body>
</html>

danik.js · #3 (**permalink**) 09.10.2013, 23:26

рони, и каков смысл использования jQuery?
Выборка по селектору? Дык это почти прокси для querySelectorAll.
Реализация плагинов? Дык ото тупо расширение прототипа плюс неявный вызов конструктора.
Функция css? Это прокси для .style
each? А чем плох голый for(;

?
Лучше б ООП показал вместо сидящего уже в горле чайниковского jQuery.

Картинку со stackoverflow про jQuery видел же?

рони · #4 (**permalink**) 10.10.2013, 01:02

danik.js,

<!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 type="text/javascript">
function plugin(s,b) {
    b.push(b[1]);
    Array.prototype.forEach.call(document.querySelectorAll(s), function(d,f){
        var a = 0,
            e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],
            c = function () {
                d.style.backgroundColor = e[a] ;
                window.setTimeout(c, 1E3 * b[a]);
                a = ++a % 4
            };
        c()
    })
};
</script>
<script type="text/javascript">
window.onload=function(){
plugin(".box",[8,2,8]);
plugin(".too",[2,2,2]);
}
</script>
  <title></title>
</head>
<body>
<div class="box">is box</div>[8,2,8]
<div class="too">is too</div>[2,2,2]
</body>
</html>

eko24 · #5 (**permalink**) 10.10.2013, 01:18

Спасибо вам огромное

danik.js · #6 (**permalink**) 10.10.2013, 03:52

Array.prototype.forEach нет в IE8 (на всякий случай).

eko24 · #7 (**permalink**) 10.10.2013, 14:02

А в чем проблема с моим кодом ?

рони · #8 (**permalink**) 10.10.2013, 14:10

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

А в чем проблема с моим кодом ?

вывод скрипта неинформативен -- что есть ошибка непонятно - коментарии отсутствуют - легче написать с нуля -- getRandomInt зачем в коде например ?

eko24 · #9 (**permalink**) 10.10.2013, 20:23

Наградил свою версию всевозможными коментраиями. Буду благодарен, если все таки получится найти ошибку в коде.

eko24 · #10 (**permalink**) 10.10.2013, 20:47

Я так же был бы Вам очень признателен, если вы прокоментриуете этот код:

$.fn.plugin = function (b) {
    b.push(b[1]);
    return this.each(function (f, d) {
        var a = 0,
            e = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"],
            c = function () {
                $(d)
                    .css({
                        "background-color": e[a]
                    });
                window.setTimeout(c, 1000 * b[a]);
                a = ++a % 4
            };
        c()
    })
};

Потому что не для всего хватает знаний яваскрипта и jQuery.
P.S.
Так же бы хотел узнать как работать с данными, которые входят в плагин jQuery, потому что хочу попробовать реализировать следующее - что бы можно было с плагина задать начальный цвет светофора, то есть с которого цвета должен начать работать светофор, например с зеленого или красного.
Заранее спасибо

Форум

Справочник

Discord чат

Курсы javascript