JSFiddle - React, Tailwind, and code Playground

by Erik Kotsiuba

HTML

направление 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>

CSS

span {padding-left:50px;}

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.