Форум

eko24 · #1 (**permalink**) 15.10.2013, 20:09

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

Но у меня вообще нет понятия как это сделать, помогите мне пожалуйста.

рони · #2 (**permalink**) 15.10.2013, 20:54

eko24,

белый верх, чёрный низ есть? есть!!!

<!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>

Форум

Справочник

Discord чат

Курсы javascript