I have a ul with some li
's inside. I want to randomly select an li
and add an .active
class for 1second, then remove .active
class and randomly select a next li
.
I am trying to do this without the use of setInterval or Timeout, so I have tried using requestAnimationFrame although I think my logic with javascript is not quite right on randomizing.
Currently I have it working but it selects the same li
each time the function is called again.
<ul>
<li class="light active"></li>
<li class="light"></li>
<li class="light"></li>
<li class="light"></li>
<li class="light"></li>
</ul>
Javascript
(function() {
var lights = document.getElementsByClassName("light");
var random = Math.floor(Math.random() * (lights.length - 1)) + 0;
var randomLight = lights[random];
function repeatOften() {
randomLight.classList += randomLight.classList ? ' active' : ' light';
requestAnimationFrame(repeatOften);
}
requestAnimationFrame(repeatOften);
})();
Here is a pen: http://ift.tt/2xMgdRo
Thanks in advance!
Aucun commentaire:
Enregistrer un commentaire