鍍金池/ 問答/HTML/ javascript 給多個 li 設置定時切換背景色

javascript 給多個 li 設置定時切換背景色

<ul>

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

</ul>

一個 ul , 字體黑色，然后從第一個 li 開始字體變紅色，隔兩秒后切換到第二個 li 變成紅色，第一個 li 恢復默認的黑色字，接下來第三個 li 變紅，依次類推一直循環(huán)，到了最后一個 li 過后，又輪到第一個 li 文字變紅色，(永遠只當前l(fā)i是紅字，其他都黑色）

新手，確實弄了很久弄不出來，很無恥的求代碼和思路，謝謝！

回答
編輯回答
陪妳哭

提供一個更高效簡單的方式供參考

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)
2018年6月22日 00:49
編輯回答
糖豆豆
      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();
2018年1月22日 15:46