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!

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)
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1eaf7b1-699cd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1eaf7b1-699cd.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?