Хочу реализировать алгоритм работы светофора
Всем доброго времени суток.
Я пробую написать скрипт, который будет симулировать работу светофора. То есть:зеленый, желтый, красный, желтый, зеленый и все по новой. То, что я пробовал делать можете посмотреть тут. Вот только этот скрипт, который я сделал в виде функции начинает неправильно работать: для двух или большего кол-ва светофоров он начинает рандомно увеличивать время для красного,зеленого и желтого света. Хотя для одного светофора работает он нормально. Идея в основном следующая: сделать функцию которая будет использовать следующие аргументы:
Если Вы сможете помочь в данной проблеме - буду очень благодарен. P.S. Так же нашел в интернете такой скрипт симуляции работы светофора. Работает он очень даже замечательно, вот только моих познаний джаваскрипта недостаточно что бы сделать из него функцию, так если Вы сможете помочь и в этом вопросе - моей благодарности будет в два раза больше :3 |
Светофор на jquery
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>
|
рони, и каков смысл использования jQuery?
Выборка по селектору? Дык это почти прокси для querySelectorAll. Реализация плагинов? Дык ото тупо расширение прототипа плюс неявный вызов конструктора. Функция css? Это прокси для .style each? А чем плох голый for(;;) ? Лучше б ООП показал вместо сидящего уже в горле чайниковского jQuery. Картинку со stackoverflow про jQuery видел же? |
danik.js,
:thanks:
<!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>
|
Спасибо вам огромное :dance:
|
Array.prototype.forEach нет в IE8 (на всякий случай).
|
А в чем проблема с моим кодом ?
|
Цитата:
|
Наградил свою версию всевозможными коментраиями. Буду благодарен, если все таки получится найти ошибку в коде.
|
Я так же был бы Вам очень признателен, если вы прокоментриуете этот код:
$.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, потому что хочу попробовать реализировать следующее - что бы можно было с плагина задать начальный цвет светофора, то есть с которого цвета должен начать работать светофор, например с зеленого или красного. Заранее спасибо |
| Часовой пояс GMT +3, время: 02:49. |