JS, setInterval for svetlofor

Question

Hello. The task is this: there are three blocks and it is necessary to change their protection correctly.

Here is what I tried to do:

$(document).ready(function() { red(); setTimeout(yellow(), 2000); }); function red() { var colors = [ "red", "black" ]; var el = $(".red"); var i = 0; setInterval(function() { el.css("background-color", colors[i]); if ((++i) >= 2) { i = 0; } }, 2000); } function yellow() { var colors = [ "yellow", "black" ]; var el = $(".yellow"); var i = 0; setInterval(function() { el.css("background-color", colors[i]); if ((++i) >= 2) { i = 0; } }, 1000); }

 .main_block { height: 500px; width: 240px; background-color: rgba(22, 22, 22, 0.93); position: relative; left: 50%; margin-left: -120px; border-radius: 75px; display: flex; flex-direction: column; } .red { background-color: #000000; } .yellow { background-color: #000000; } .green { background-color: #000000; } .red, .yellow, .green { width: 100px; height: 100px; border-radius: 50px; position: relative; left: 50%; margin: 50px 0 0 -50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main_block"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div>

The algorithm should be as follows:

Red lights up for 2 seconds
Yellow - 1 second
Green - 3 seconds

But I got confused with setInterval and setTimeout.

I would be grateful if someone tells me the algorithm for doing all this. Those. All these delays should be correctly described, but I do not understand how

Thanks for attention

I think that setInterval is not needed here. Only setTimeout - Dmytryk

zhurof zhurof 6.133 2 7 25 · Accepted Answer · 2018-01-15T18:27:57

I will offer a solution on css.

 .main_block { height: 500px; width: 240px; background-color: rgba(22, 22, 22, 0.93); position: relative; left: 50%; margin-left: -120px; border-radius: 75px; display: flex; flex-direction: column; } .red { background-color: #000000; animation:red 6s steps(1) infinite; } .yellow { background-color: #000000; animation:yellow 6s steps(1) infinite; } .green { background-color: #000000; animation:green 6s steps(1) infinite; } .red, .yellow, .green { width: 100px; height: 100px; border-radius: 50px; position: relative; left: 50%; margin: 50px 0 0 -50px; } @keyframes red{ 0%{ background-color: red; } 33.33%,100%{ background-color: black; } } @keyframes yellow{ 0%,50%,100%{ background-color: black; } 33.33%{ background-color: yellow; } } @keyframes green{ 0%,100%{ background-color: black; } 50%{ background-color: green; } }

 <div class="main_block"> <div class="red"></div> <div class="yellow"></div> <div class="green"></div> </div>

teran teran 18k one 13 thirty · Answer 2 · 2018-01-15T15:19:40

As mentioned in the commentary, you don’t need the spacing here. If it is necessary to switch colors in the order of красный-желтый-зеленый-красный- ... you can do something like this.

If the colors change in a circle, that is, when green is reached - then yellow back, then the task is somewhat more complicated, and you need to memorize the direction of the switch.

 function change(){ var duration = { red: 2, yellow: 1, green: 3 }; var $c = $(".main_block .active"); //console.log($c.data('color')); setTimeout(function(){ $c.removeClass('active'); var $next = $c.next(); if($next.length == 0) $next = $(".main_block .red"); $next.addClass('active'); change(); }, duration[$c.data('color')] * 1000); } change();

 .main_block { height: 500px; width: 240px; background-color: rgba(22, 22, 22, 0.93); position: relative; left: 50%; margin-left: -120px; border-radius: 75px; display: flex; flex-direction: column; } .red { background-color: #000000; } .red.active { background-color: red; } .yellow { background-color: #000000; } .yellow.active { background-color: yellow; } .green { background-color: #000000; } .green.active { background-color: green; } .red, .yellow, .green { width: 100px; height: 100px; border-radius: 50px; position: relative; left: 50%; margin: 50px 0 0 -50px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="main_block"> <div class="red active" data-color="red"></div> <div class="yellow" data-color="yellow"></div> <div class="green" data-color="green"></div> </div>

But "when green is reached, then yellow back" - no, it is not necessary.
Everything is much easier, just in a circle, that is, you don’t need to remember anything
@ Bipach var variable declaration, $c variable name, $ confuses you?

JS, setInterval for svetlofor

2 answers 2

More articles: