Увеличение кол-ва фаз для функции симулирующей работу светофора
Есть функция, которая симулирет работу светофора:
Концепция следующая: Светофор начинаеться с зёлёного, потом идет жёлтый, потом идёт красный, или: Сначала светит красный, потом жёлтый, и зёлёный. Но в любом случае фазы для светофора будут прописаны следующим образом: [зелёный,жёлтый,красный] Переменная, которая объясняет с какого цвета начинать работу светофора идет после этих 3х: [зелёный,жёлтый,красный,0 или 2] Если эта переменная 0 - светофор начинает свою работу с зелёного, если наоборот - с красного. То есть в конечном итоге в коде это будет написано следующим образом: [2,4,3,0] То есть: 2 секунды зёлёного, 4 секунды жёлтого и 3 секунды красного, начинаеться работа с зелёного Вы можете перейти по этой ссылке что бы увидеть работу примера, или глянуть исходники тут: <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span {padding-left:50px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
var traffic_lights = [
//фазы
//зелёный,жёлтый,красный, 4я цифра дает знать
//с какого цвета должен начать свою работу светофор
//если она равна 0 - светофор начинает работу с зелёного
//если она равна 2 - светофор начинает работу с красного
[9,6,19,0],//направление 1
[9,6,19,0],
[30,6,17,0],//направление 2
[30,6,17,0],
[29,6,30,0],//направление 3
[29,6,30,0],
[32,6,40,0],//направление 4
[32,6,40,0],
[37,6,33,0],//направление 5
[37,6,33,0],
[26,0,80,2],//направление 6, 3 эти светофоры будут начинаться с красного
[20,40,26,2],
[27,3,56,2],
];
function simulation(e) {
for (var a = 0, d; d = $("#c" + a); a++) {
var f = ["#008000", "#FFFF00", "#FF0000", "#FFFF00"];//цвета для светофоров
(function (a, b) {
var c = b[3];
b[3] = b[1];
return function () {
a.css({"background-color": f[c]});//меняем фон
a.html(b[c]); //показываем длительность текущего цвета
window.setTimeout(arguments.callee, 1000 * b[c]);
c = ++c % 4
}
})(d, e[a])()
}
};
simulation(traffic_lights);//init.
</script>
</head>
<body>
направление 1:<span id="c0"></span>
<span id="c1"></span><br><br>
направление 2:<span id="c2"></span>
<span id="c3"></span><br><br>
направление 3:<span id="c4"></span>
<span id="c5"></span><br><br>
направление 4:<span id="c6"></span>
<span id="c7"></span><br><br>
направление 5:<span id="c8"></span>
<span id="c9"></span><br><br>
направление 6:<span id="c10"></span>
<span id="c11"></span>
<span id="c12"></span>
</body>
</html>
У меня проблема следующая - я пытаюсь сделать светофор с большим количеством фаз. Например светофор работает по такому циклу: красный > жёлтый > красный > жёлтый > зелёный > жёлтый > В коде должно прописываться что-то на подобии этого: [{color:red ,time:12 },{color:green ,time:8 },{color:red ,time:6 },{color:yellow ,time:4 },{color:red ,time:4 },{color:yellow ,time:5 },]
Но у меня вообще нет понятия как это сделать, помогите мне пожалуйста. |
eko24,
:cray: белый верх, чёрный низ есть? есть!!! :-? <!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
span {padding-left:50px; width: 50px; height: 50px;}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function() {
function simulation(id, e) {
var d = $("#" + id),
c = 0,
n = 0;
(function (a, b) {
return function () {if (!n){
a.css({"background-color": b[c].color});//меняем фон
n = b[c].time;
c = ++c % b.length
};
a.html(n); //показываем длительность текущего цвета
n--;
window.setTimeout(arguments.callee, 1000);
}
})(d, e)()
}
simulation("c0",[{color:'red' ,time:12 },{color:'green' ,time:8 },{color:'red' ,time:6 },{color:'yellow' ,time:4 },{color:'red' ,time:4 },{color:'yellow' ,time:5 }]);
simulation("c1",[{color:'red' ,time:3 },{color:'green' ,time:3 },{color:'red' ,time:3 },{color:'yellow' ,time:3 },{color:'red' ,time:3 },{color:'yellow' ,time:15 }]);
})
</script>
</head>
<body>
<span id="c0"></span><br>
<span id="c1"></span>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:48. |