Есть функция, которая симулирет работу светофора:
Концепция следующая:
Светофор начинаеться с зёлёного, потом идет жёлтый, потом идёт красный, или:
Сначала светит красный, потом жёлтый, и зёлёный.
Но в любом случае фазы для светофора будут прописаны следующим образом:
[зелёный,жёлтый,красный]
Переменная, которая объясняет с какого цвета начинать работу светофора идет после этих 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 },]
Но у меня вообще нет понятия как это сделать, помогите мне пожалуйста.