Traffic light using javascript

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.

11 thoughts on “Traffic light using javascript”

  1. I simply couldn’t leave your site before suggesting
    that I really enjoyed the standard information an individual supply in your guests?

    Is going to be back often in order to check up on new posts

    Reply
  2. Thanks for a marvelous posting! I truly enjoyed reading
    it, you will be a great author.I will be sure to bookmark your blog and definitely
    will come back sometime soon. I want to encourage you continue your great work, have
    a nice afternoon!

    Reply
  3. 695819 675900I dont agree with this specific post. Even so, I did researched in Google and Ive located out that you are correct and I had been thinking inside the incorrect way. Continue producing quality material similar to this. 745856

    Reply

Leave a Comment