Хочу реализировать алгоритм работы светофора
Всем доброго времени суток.
Я пробую написать скрипт, который будет симулировать работу светофора. То есть:зеленый, желтый, красный, желтый, зеленый и все по новой. То, что я пробовал делать можете посмотреть тут. Вот только этот скрипт, который я сделал в виде функции начинает неправильно работать: для двух или большего кол-ва светофоров он начинает рандомно увеличивать время для красного,зеленого и желтого света. Хотя для одного светофора работает он нормально. Идея в основном следующая: сделать функцию которая будет использовать следующие аргументы:
Если Вы сможете помочь в данной проблеме - буду очень благодарен. 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, потому что хочу попробовать реализировать следующее - что бы можно было с плагина задать начальный цвет светофора, то есть с которого цвета должен начать работать светофор, например с зеленого или красного. Заранее спасибо |
eko24,
переменная light работает на все светофоры поэтому получается ерунда у каждого должен быть свой хранитель. |
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()// первый запуск
})
};
|
Спасибо )
А я вот все ломаю голову как сделать так, что бы можно было начинать работу с определённого цвета. Можете с этим помочь ? |
Цитата:
|
Да, но тогда все светофоры будут начинаться с красного.
Я просто не совсем понимаю принцип работы jQuery плагина, и мне нужно что бы этот параметр можно было передать при подключении плагина к определенному элементу, например:
$(".box").plugin([8,2,8],true);
где true отвечает за переменную begin_with_green, которая при значении true начинает работу с зеленого цвета, а при false начинает с красного . Как то так ;) P.S. И еще хочу спросить как взаимойдействовать с информацией(переменными), которая находиться в плагине jQuery. Если я хочу достучаться до переменной у которой значение "2" вот отсюда?
$(".box").plugin([8,2,8]);
то как мне это сделать ? А то уже перерыл кучу топиков по созданию jQuery плагинов, но что-то ни в одном из них не видел как объясняют про взаимодействие с переменными из плагинов. Очень жду вашего ответа. |
Цитата:
<!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>
|
Мой маленький светофор. Учусь я :)
<!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>
|
Неплохо.
Если хотите усложнить себе задачку - реализируйте следующую визуализацию светофора: зелёный>зелёный мигающий>жёлтый>красный>кр сный+жёлтый. Потому что настоящий светофор работает именно так. |
<!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) алгоритма |
| Часовой пояс GMT +3, время: 09:23. |