javascript - 如何递归更改元素的颜色

Question

我想创建一个递归更改文本颜色的程序。

我已经创建了一个包含随机颜色代码的 for(){} 循环，以便尝试对其进行递归。

 for(var x = 0; x > -1; x++){
 document.getElementById("k").style.color = '#'+(0x1000000+ 
 (Math.random())*0xffffff).toString(16).substr(1,6)}

 <p id="k">Yeet</p>

实际结果是颜色保持默认的黑色。我希望它每次(无限)运行时都会改变颜色。

Answer 1

你必须使用 setInterval()在不阻塞主执行的情况下异步运行的方法。

setInterval(() => document.getElementById("k").style.color = '#' + (0x1000000 +(Math.random()) * 0xffffff).toString(16).substr(1, 6),500)

<p id="k">Yeet</p>

---

如果您想在某个时间点停下来，请使用 clearInterval()清除间隔的方法。

let i = 0;

const inter = setInterval(() => {
  document.getElementById("k").style.color = '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6);
  // to clear after 10 colors
  if (i++ === 10) clearInterval(inter);
}, 500)

<p id="k">Yeet</p>