Javascript sets multiple li to switch background colors regularly.

    <li>a</li>
<li>b</li>
<li>c</li>
...
<li>n</li>

A ul, the font is black, and then the font turns red from the first li, then switches to the second li after two seconds, the first li resumes the default black word, then the third li turns red, and so on, and so on. After the last li, the first li text turns red, (only the current li is red, everything else is black)

novice, really can not get it out for a long time, very shameless to ask for the code and ideas, thank you!

Javascript
Mar.14,2021 
      var lis = document.querySelectorAll("li"), queue = [];
      Array.prototype.forEach.call(lis, function (el) {
        var start = function () {
          el.style.color = "red";
          setTimeout(function () {
            el.style.color = "black";
            queue.push(start);
            var event = queue.shift();
            event();
          }, 2000);
        }
        queue.push(start);
      })
      var  one = queue.shift();
      one();

provide a more efficient and simple way for reference 

const list = document.querySelectorAll('li')
let i = list.length - 1
setInterval(() => {
  list[i].style.color = 'initial'
  i = (i + 1) % list.length
  list[i].style.color = 'red'
}, 2000)

Previous: Ask Zhihu H5 how to avoid the wrong URL prompt of safari in the process of waking up APP?

Next: The el-dialog component of vue's element-UI displays an exception

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu