CODEWITHSUNDEEP
javascripthtmlcss
user7596377
user7596377

Reputation:

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.

Upvotes: 1

Views: 10105

Answers (2)

Ashan Navarathna
Ashan Navarathna

Reputation: 1

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.com/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>

Upvotes: 0

Steve Mc
Steve Mc

Reputation: 3441

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

Upvotes: 2

Related Questions