traffic light javascript code

traffic light javascript code

Here is a HTML and CSS code to create traffic light using javascript setInterval function.

Here is the HTML Code :

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>LIGHTS</title>
    <style>
      .box{width: 150px; height: 150px; margin:20px 0px 20px 0px;}
    </style>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="abcd.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-12 bg-dark text-light">
          <h1 id='count' class="text-center my-5"> Counter Begin Here</h1>
        </div>
      </div>
      <div class="row">
        <div class="col-md-3 border border-dark px-0">
          <h1 class="box1 bg-dark text-center text-white py-3">0</h1>
          <div class="box rounded-circle bg-danger mx-auto" id='b1-l1'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b1-l2'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b1-l3'></div>
        </div>
        <div class="col-md-3 border border-dark px-0">
          <h1 class="box2 bg-dark text-center text-white py-3">0</h1>
          <div class="box rounded-circle bg-danger mx-auto" id='b2-l1'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b2-l2'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b2-l3'></div>
        </div>
        <div class="col-md-3  border border-dark px-0">
          <h1 class="box3 bg-dark text-center text-white py-3">0</h1>
          <div class="box rounded-circle bg-danger mx-auto" id='b3-l1'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b3-l2'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b3-l3'></div>
        </div>
        <div class="col-md-3 border border-dark px-0">
          <h1 class="box4 bg-dark text-center text-white py-3">0</h1>
          <div class="box rounded-circle bg-danger mx-auto" id='b4-l1'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b4-l2'></div>
          <div class="box rounded-circle bg-dark mx-auto" id='b4-l3'></div>
        </div>
      </div>
    </div>
  </body>
</html>
traffic light javascript code
traffic light javascript code

 

Here is Jquery code to make this work :

var timer = 30;
var yellow = 25;
var box = 1;
var counter = 0;
var box1 = 1;
var box2 = timer + 1;
var box3 = timer * 2 + 1;
var box4 = timer * 3 + 1;
function lights(){
  $('#count').text(counter);

  $('.box1').html(box1);
  $('.box2').html(box2);
  $('.box3').html(box3);
  $('.box4').html(box4);
  if(box==1){
    box1++;
    if(counter==1){
      $('#b1-l3').removeClass('bg-dark').addClass('bg-success');
      $('#b1-l1').removeClass('bg-danger').addClass('bg-dark');
    }
    if(counter==yellow){
      $('#b1-l2').removeClass('bg-dark').addClass('bg-warning');
      $('#b2-l2').removeClass('bg-dark').addClass('bg-warning');
    }
    if(counter==timer){
      $('#b1-l2').removeClass('bg-warning').addClass('bg-dark');
      $('#b1-l1').removeClass('bg-dark').addClass('bg-danger');
      $('#b1-l3').removeClass('bg-success').addClass('bg-dark');
      $('#b2-l2').removeClass('bg-warning').addClass('bg-dark');
      box=2;
      counter=0;
      box1 = timer * 3;

    }
    box2--;
    box3--;
    box4--;
  }
  if(box==2){
    box2++;
    if(counter==1){
      $('#b2-l3').removeClass('bg-dark').addClass('bg-success');
      $('#b2-l1').removeClass('bg-danger').addClass('bg-dark');
    }
    if(counter==yellow){
      $('#b2-l2').removeClass('bg-dark').addClass('bg-warning');
      $('#b3-l2').removeClass('bg-dark').addClass('bg-warning');
    }
    if(counter==timer){
      $('#b2-l2').removeClass('bg-warning').addClass('bg-dark');
      $('#b2-l1').removeClass('bg-dark').addClass('bg-danger');
      $('#b2-l3').removeClass('bg-success').addClass('bg-dark');
      $('#b3-l2').removeClass('bg-warning').addClass('bg-dark');
      box=3;
      counter=0;
      box2 = timer * 3;
    }
    box1--;
    box3--;
    box4--;
  }
  if(box==3){
    box3++;
    if(counter==1){
      $('#b3-l3').removeClass('bg-dark').addClass('bg-success');
      $('#b3-l1').removeClass('bg-danger').addClass('bg-dark');
    }
    if(counter==yellow){
      $('#b3-l2').removeClass('bg-dark').addClass('bg-warning');
      $('#b4-l2').removeClass('bg-dark').addClass('bg-warning');
    }
    if(counter==timer){
      $('#b3-l2').removeClass('bg-warning').addClass('bg-dark');
      $('#b3-l1').removeClass('bg-dark').addClass('bg-danger');
      $('#b3-l3').removeClass('bg-success').addClass('bg-dark');
      $('#b4-l2').removeClass('bg-warning').addClass('bg-dark');
      box=4;
      counter=0;
      box3 = timer * 3;
    }
    box1--;
    box2--;
    box4--;
  }
  if(box==4){
    box4++;
    if(counter==1){
      $('#b4-l3').removeClass('bg-dark').addClass('bg-success');
      $('#b4-l1').removeClass('bg-danger').addClass('bg-dark');
    }
    if(counter==yellow){
      $('#b4-l2').removeClass('bg-dark').addClass('bg-warning');
      $('#b1-l2').removeClass('bg-dark').addClass('bg-warning');
    }
    if(counter==timer){
      $('#b4-l2').removeClass('bg-warning').addClass('bg-dark');
      $('#b4-l1').removeClass('bg-dark').addClass('bg-danger');
      $('#b4-l3').removeClass('bg-success').addClass('bg-dark');
      $('#b1-l2').removeClass('bg-warning').addClass('bg-dark');
      box=1;
      counter=0;
      box4 = timer * 3;
    }
    box1--;
    box2--;
    box3--;
  }
  counter++;
}
setInterval(lights, 1000);

57 thoughts on “traffic light javascript code

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Normally I don’t read post on blogs, however I wish to say that this write-up very forced me to take a look at and do it! Your writing taste has been amazed me. Thanks, very nice article.

  2. A lot of thanks for your own hard work on this web page. Kim really likes making time for internet research and it’s easy to understand why. We all notice all relating to the compelling way you offer useful guidelines on your website and invigorate response from website visitors on the point while my princess is really becoming educated a lot of things. Have fun with the rest of the year. You have been doing a really great job.

  3. An outstanding share! I’ve just forwarded this onto a friend who was doing a little homework on this. And he in fact ordered me lunch simply because I found it for him… lol. So let me reword this…. Thank YOU for the meal!! But yeah, thanx for spending some time to talk about this matter here on your web site.

  4. I do agree with all of the ideas you’ve presented to your post. They’re very convincing and will definitely work. Still, the posts are very short for newbies. Could you please prolong them a little from subsequent time? Thanks for the post.

  5. Hello! I just wanted to ask if you ever have any trouble with hackers? My last blog (wordpress) was hacked and I ended up losing months of hard work due to no backup. Do you have any solutions to prevent hackers?

  6. Please let me know if you’re looking for a writer for your site. You have some really good articles and I believe I would be a good asset. If you ever want to take some of the load off, I’d absolutely love to write some content for your blog in exchange for a link back to mine. Please blast me an e-mail if interested. Cheers!

  7. I loved as much as you will receive carried out right here. The sketch is tasteful, your authored material stylish. nonetheless, you command get got an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again as exactly the same nearly very often inside case you shield this increase.

  8. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You obviously know what youre talking about, why throw away your intelligence on just
    posting videos to your site when you could be giving us something enlightening to read?

  9. Hi there would you mind letting me know which webhost
    you’re working with? I’ve loaded your blog in 3 completely different internet
    browsers and I must say this blog loads a lot faster then most.
    Can you suggest a good internet hosting provider at
    a reasonable price? Thanks, I appreciate it!

  10. Hello there, just became aware of your blog through Google, and found that it’s truly informative.
    I’m going to watch out for brussels. I will appreciate
    if you continue this in future. Lots of people will be benefited from your writing.
    Cheers!

  11. After I originally commented I seem to have clicked on the -Notify me
    when new comments are added- checkbox and from now on every
    time a comment is added I recieve four emails with the exact same comment.
    There has to be an easy method you can remove
    me from that service? Kudos!

  12. Thanks for a marvelous posting! I definitely enjoyed reading it, you happen to be a great author. I will be sure to bookmark your blog and will come back at some point. I want to encourage one to continue your great posts, have a nice afternoon!

  13. Thanks for the favorable writeup. Them the truth is had been a fun accounts the idea video youtube indonesia. Start looking superior for you to much more brought pleasant from you finding out! Even so, how can we keep in contact?

  14. I am really loving the theme/design of your blog. Do you ever run into any web browser compatibility problems? A small number of my blog visitors have complained about my website not working correctly in Explorer but looks great in Firefox. Do you have any suggestions to help fix this issue?

  15. I know this if off topic but I’m looking into starting my own weblog and was wondering what all is needed to get set up? I’m assuming having a blog like yours would cost a pretty penny? I’m not very web savvy so I’m not 100 certain. Any recommendations or advice would be greatly appreciated. Kudos

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.