如何在JavaScript中使用setInterval更改HTML列表项的样式？

我有一个包含3个列表项的HTML代码，我的ul ID是“exercise6 list”

<ul id="exercise6-list">

<li>List 1</li>

<li>List 2</li>

<li>List 3</li>

</ul>

---

*我对编程非常陌生，但感谢您的帮助

我使用了setTimeout，而不是setInterval，因为interval一直运行，直到您停止它，因为超时只发生一次，然后您必须重新运行它

这段代码是一个递归函数，它使用一个计数器来确定循环当前在列表中的位置

var parent=document.querySelector（“练习6列表”）；
var children=parent.querySelectorAll（“li”）；
var total=子项长度；
功能发光（计数器）{
children.forEach（函数（el）{
el.类列表。删除（“突出显示”）；
});
el=儿童[计数器]；
el.类列表。添加（“突出显示”）；
setTimeout（函数（）{
如果（计数器<总计-1）{
计数器++；
辉光（计数器）；
}
否则{
el.类列表。删除（“突出显示”）；
}
}, 3000);
}
辉光（0）
。突出显示{
背景：红色；
颜色：#fff
}

111
222
333
Array.from（element.children）.forEach（child=>{
child.classList.add（'glow'）；
setTimeout（（）=>child.classList.remove（'class'），3000）；
});

然而，我认为如果你让每个

li

发光的时间超过你当前设置为300的时间间隔，就会发生奇怪的事情

---

如果您使用jQuery之类的工具，则不需要手动迭代。

这里是一个使用async await的递归解决方案

var moveGlow=async函数（）{
var元素=document.querySelector（“.box”）；
element.style.background=“绿色”；
等待睡眠（3000）
element.style.background=“红色”
等待睡眠（3000）；
返回moveGlow（）
}
让睡眠=（时间）=>新承诺（res=>setTimeout（res，时间））
moveGlow（）

.box{
宽度：100px；
高度：100px；
背景：红色；
}

var d=document.querySelector（“练习6列表”）；
d、 style=“背景色：黄色；”
设置超时（（）=>{
d、 style=“”
},3000)
//时间以毫秒为单位。。简单数学

文本1
文本2
文本3

要创建定时函数，我们使用

setInterval

，将类“glow”添加到当前元素中，并从上一个元素中删除该类。
为了循环遍历元素，我们使用一个索引变量，它每循环增加一次，并在必要时循环返回

let索引=0；
让elements=document.querySelector（#exercise6 list”）.children；
让glowFunc=（）=>{
if（elements.length）您将循环什么？可能是每个li，即ul的子级。@Theresa，您尝试过您的建议吗？我从这里开始。如果您要递归，则
计数器
似乎是只有函数才应该知道的状态。
var moveGlow = function() {

 var element = document.querySelector("#exercise6-list");

 // ... to make it glow i've so far used .setAttribute("class", "glow")

};

clearInterval(window.interval);
window.interval = setInterval(moveGlow, 3000);