javascript - 如何在 X 秒后更改文本颜色？

Question

这是我的代码:

<font color=green>
     14:00
</font><br>
<font color=green>
     14:30
</font><br>
<font color=green>
     15:00
</font><br>
........

如何在一段时间后更改每个文本的颜色(红色)？

我试过这段代码，但显然它不起作用(onLoad 仅用于 body/img 标签):

<font color=green onLoad="setTimeout('this.style.color=red',xxx-seconds);">
     14:00
</font><br>

有什么建议吗？

采用的解决方案(感谢 minitech):

<style>
    @keyframes change {
        from { color: green }
        to   { color: red }
    }
</style>

<span style='animation: change (number-of-seconds)s step-end both;'>
    14:30
</span>
<span style='animation: change (number-of-seconds)s step-end both;'>
    15:00
</span>
.............

Answer 1

您可以为此使用 CSS 动画:

font {
    animation: change 3s step-end both;
}

@keyframes change {
    from { color: green }
    to   { color: red }
}

现场演示: http://jsfiddle.net/simevidas/7ZrtQ/

在上面的代码中，延迟定义为3s，代表3秒。

顺便说一句，如果您不想让计时器在页面加载时执行，而是想让它由某些后续事件(例如用户点击)触发，您可以在 CSS 类中定义动画，然后只需稍后使用 JavaScript 将该类添加到元素中即可触发效果。

现场演示: http://jsfiddle.net/simevidas/7ZrtQ/3/