Светофор

HTML

<div id="signal1" class="signal">
    <div></div>
    <div></div>
    <div></div>
</div>

CSS

.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;
}

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++) {
            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++;
        };
        
        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...