html - Traffic light using javascript - Stack Overflow|Programmer puzzle solving

I want create traffic light controller.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>isiqfor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body onload="timer;">

<div id="isiqfor">
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>

</div>
    <script src="script.js"></script>
</body>
</html>

CSS code:

#isiqfor{
    border: 10px solid black;
    padding: 10px 3px;
    width: 50px;
}
#isiqfor>div{
    width:50px;
    height: 50px;
    border-radius: 50%;
    opacity: .3;
}
.green{
    background-color: green;
}
.yellow{
    background-color: yellow;
}
.red{
    background-color: red;
}

And JS file:

function myFun () {
    // body... 
    var green=document.getElementsByClassName("green")[0];
    var red=document.getElementsByClassName("red")[0];
    var yellow=document.getElementsByClassName("yellow")[0];

    green.style.opacity=1;
    setTimeout(function () {
        /* body... */
        green.style.opacity=.3;
        red.style.opacity=.3;
        yellow.style.opacity=1;
    },5000);

    setTimeout(function () {
        /* body... */
        green.style.opacity=.3;
        red.style.opacity=1;
        yellow.style.opacity=.3;
    },7000);

    setTimeout(function () {
        /* body... */
        green.style.opacity=1;
        red.style.opacity=.3;
        yellow.style.opacity=.3;
    },12000);


}

var timer = setInterval(function () {
    /* body... */
    myFun()
},13000);

But problem is when page loads it must wait 13 second for beginning traffic light.How can solve this problem? I want when page loads green light has switched.

I want create traffic light controller.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>isiqfor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body onload="timer;">

<div id="isiqfor">
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>

</div>
    <script src="script.js"></script>
</body>
</html>

CSS code:

#isiqfor{
    border: 10px solid black;
    padding: 10px 3px;
    width: 50px;
}
#isiqfor>div{
    width:50px;
    height: 50px;
    border-radius: 50%;
    opacity: .3;
}
.green{
    background-color: green;
}
.yellow{
    background-color: yellow;
}
.red{
    background-color: red;
}

And JS file:

function myFun () {
    // body... 
    var green=document.getElementsByClassName("green")[0];
    var red=document.getElementsByClassName("red")[0];
    var yellow=document.getElementsByClassName("yellow")[0];

    green.style.opacity=1;
    setTimeout(function () {
        /* body... */
        green.style.opacity=.3;
        red.style.opacity=.3;
        yellow.style.opacity=1;
    },5000);

    setTimeout(function () {
        /* body... */
        green.style.opacity=.3;
        red.style.opacity=1;
        yellow.style.opacity=.3;
    },7000);

    setTimeout(function () {
        /* body... */
        green.style.opacity=1;
        red.style.opacity=.3;
        yellow.style.opacity=.3;
    },12000);


}

var timer = setInterval(function () {
    /* body... */
    myFun()
},13000);

But problem is when page loads it must wait 13 second for beginning traffic light.How can solve this problem? I want when page loads green light has switched.

Share Improve this question asked Mar 4, 2017 at 12:39 user7596377

You can simplify your code. Go through this demo - jsfiddle/abhitalks/3f7qztm3 and see how the code works. – Abhitalks Commented Mar 4, 2017 at 13:47
thanks man you save me =D – user7596377 Commented Mar 4, 2017 at 14:10

Add a ment |

2 Answers 2

Sorted by: Reset to default 2

Have you tried calling myFun straight away after your timer is set? See the call to myFun added to the bottom of the following code:

var timer = setInterval(function () {
    /* body... */
    myFun()
},13000);

myFun();//Call 'myFun' straight away...

I created a simple traffic light system! Try this one. I used jquery to simplify the attribute selection.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis./ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Traffic Lights</title>
</head>

<body>
    <p>Demonstrate traffic lights system</p>


    <div id="div1" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
    <div id="div2" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div><br>
    <div id="div3" style="width:80px;height:80px;background-color:white;border: 1px solid #000;"></div>

</body>
<script>

    $(document).ready(function () {
        var state = 0;
        setInterval(function () {
            // state 0 > STOP
            // state 1 > READY 
            // state default > GO 
            switch (state) {
                case 0:
                    state = 1;
                    $('#div3').css({ 'background-color': 'white' });
                    $('#div1').css({ 'background-color': 'red' });
                    break;
                case 1:
                    state = 3
                    $('#div1').css({ 'background-color': 'white' });
                    $('#div2').css({ 'background-color': 'yellow' });
                    break;
                default:
                    state = 0;
                    $('#div2').css({ 'background-color': 'white' });
                    $('#div3').css({ 'background-color': 'green' });
            }

        }, 2000);
    });

   

</script>

</html>

Programmer puzzle solving

html - Traffic light using javascript - Stack Overflow

2 Answers 2

Articles related to this article

comment list (0)