javascript - 如何随机更改多个 <SPAN> 的 backgroundColor？

Question

所以我有多个这样的跨度:

<span unselectable="on" 
    onmouseover="this.style.backgroundColor='#ffcc99';"
    onmouseout="this.style.backgroundColor='#a8c0f0';"
    onclick="javascript stuff" 
    style="-webkit-user-select:none;
        -moz-user-select:none;
        display: inline-block; 
        cursor: pointer;
        font-family: arial; 
        background: #a8c0f0;
        padding-top:9px;
        padding-bottom:9px;
        padding-right:9px;
        padding-left:9px;">
    My Span
</span>

如果您愿意，我希望它们闪烁/闪烁，每次将背景颜色从它们的正常颜色状态更改为我将定义的另一种颜色，持续大约 0.5 到 1 秒，然后恢复到它们的正常颜色。

但我希望它们都随机触发，所以它看起来不像一个模式。只是偶尔懒洋洋的眨眼。就像每 8-15 秒一次。

我注意到“onload”不适用于 SPAN，所以我不确定该怎么做。

Answer 1

• 获取对所有 span 元素的引用。
• 使用 style.backgroundColor 存储它们的原始背景颜色。
• 生成随机秒数。
• 使用 setInterval() 和 1000 间隔。
• 每个间隔，递减随机秒数。当它为 0 时，改变背景颜色。使用新的 setTimeout() 恢复原来的颜色。
• 生成新的随机秒数并重复。