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/

enter image description here

Answer 2

这样的事情：

setTimeout(function(){
    document.getElementsByTagName("p")[0].style.color = "#cccccc";
},3000);

由于getElementsByTagName返回<p>个元素的数组，我们希望选择第一个[0]元素，因为数组计数从0开始。

您可能需要将getElementsByTagName部分更改为<span>标记。或者，有getElementById。

<强> getElementsByClassName方法

或者，如果您想要使用相同的类定位每个元素，您可以执行以下操作：

function targetGroup(className){
    // loop throgh the elements
    var elemArray = document.getElementsByClassName(className);
    for(var i = 0; i < elemArray.length; i++){
        elemArray[i].style.color = "#ffff00";
    }
}

setTimeout(function(){
    targetGroup('foo'); // this is the class name you are targetting.
},2000);

您的HTML看起来像：

<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>
<span class="foo">bar</span>

根据此页面上的示例修改了代码：http://www.developphp.com/view_lesson.php?v=881

Answer 3

我建议不要使用font代码，而是使用span代码。以下是JSFiddle中的工作示例。

<强> HTML

<span id="text">text</span>

<强>的JavaScript

var text = document.getElementById('text');
text.addEventListener("load", init(), false);

function changeColor() {
    text.style.color = "#F00";
}

function init() {
    setTimeout(changeColor, 3000);
}

以下是我在代码中使用的每个JavaScript函数的简要说明。

<强>的getElementById

通过ID返回对DOM元素的引用。
  有关此功能的详细信息，请参阅here
  对于替代功能，请检查this URL

在我的示例中，我已通过'text'，这是我ID标记的SPAN。

<强>的addEventListener

在其调用的listener上注册指定的EventTarget，该events可以是支持init()的任何对象。
有关此功能的详细信息，请参阅here

在我的示例中，我在listener对象上注册了text load，该对象将在changeColor()事件中调用。

<强>的setTimeout

在指定的延迟后调用函数或执行代码段。
有关此功能的详细信息，请参阅here

在我的例子中，我已经将init()函数作为参数传递，因此它将在3秒延迟后被调用（注意：延迟是毫秒）。

所以，这是最后的过程：

元素已加载

{{1}}函数被称为

'setTimeout（）'函数被调用

'changeColor（）'函数在3秒后被调用

元素的颜色已更改

如何在X秒后更改文字颜色？

3 个答案: