Untitled

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
    <script type="text/javascript">
        var lightR = document.getElementById('r');
        var lightY = document.getElementById('y');
        var lightG = document.getElementById('g');
        function turnOn(){

            setInterval('dzialanie()',6000);

        }
        function dzialanie(){

            setTimeout('jedz()',0);
            setTimeout('zatrzymaj()',2000);
            setTimeout('stop()',3000);
            setTimeout('zolte()',5000);

        }

        function jedz(){
            lightR.style.background = 'black';
            lightY.style.background = "black";
            lightG.style.background = "green";
        }

        function zolte(){
            lightR.style.background = "black";
            lightY.style.background = "yellow";
            lightG.style.background = "black";
        }

        function stop(){
            lightR.style.background = "red";
            lightY.style.background = "black";
            lightG.style.background = "black";
        }

        function zatrzymaj(){
            lightR.style.background = "black";
            lightY.style.background = "yellow";
            lightG.style.background = "green";
        }
    </script>
</head>
<body>
    <div class="sygnalizator">
        <div id="r" class="light r"></div>
        <div id="y" class="light y"></div>
        <div id="g" class="light g"></div>
    </div>
    <input type="submit" onclick="turnOn()">

</body>
</html>

<css
.sygnalizator{
    background: black;
    width: 100px;
    min-height: 290px;
    padding-top: 10px;
}

.light{
    width: 80px;
    min-height: 80px;
    margin-left: 10px;
    margin-bottom:  10px;
    border-radius: 50px;
}

.r{
    background: red;
}

.y{
    background: yellow;
}

.g{
    background: green;
}
body{
    color: white;
}
>