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

How to change text color after X amount of seconds?

提问by Ken

this is my code:

这是我的代码：

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

How can I change color (in red) of every single text after some time has passed?

一段时间后，如何更改每个文本的颜色（红色）？

I have tried this code but obviously it doesn't function (onLoadis only for the body/img tags):

我试过这段代码，但显然它不起作用（onLoad仅适用于 body/img 标签）：

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

Any suggestions?

有什么建议？

Solution adopted (thanks to minitech):

采用的解决方案（感谢 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>
.............

回答by ?ime Vidas

You coulduse CSS animations for this:

您可以为此使用 CSS 动画：

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

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

Live demo:http://jsfiddle.net/simevidas/7ZrtQ/

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

In the above code, the delay is defined by 3swhich represents 3 seconds.

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

Btw, if you don't want to have the timer execute on page load, but instead want to have it triggered by some subsequent event (e.g. a user click), you can define the animation in a CSS class, and then just add that class to the element later with JavaScript to trigger the effect.

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

Live demo:http://jsfiddle.net/simevidas/7ZrtQ/3/

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

回答by Nick R

Something like this:

像这样的东西：

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

Because getElementsByTagNamereturns an array of <p>elements, we want to select the first one, with [0], because the array count starts from 0.

因为getElementsByTagName返回的是一个<p>元素数组，我们要选择第一个，带有[0]，因为数组计数从 0 开始。

You might need to change the getElementsByTagNamepart to a <span>tag. Alternatively, there's getElementById.

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

getElementsByClassName

getElementsByClassName

Alternatively,if you want to target each element with the same class, you can do:

或者，如果您想针对具有相同类的每个元素，您可以执行以下操作：

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);

And your HTML would look like:

你的 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>

Code modified from the example on this page : http://www.developphp.com/view_lesson.php?v=881

从本页示例修改的代码：http: //www.developphp.com/view_lesson.php?v=881

回答by Karlen Kishmiryan

I suggest to not use fonttag, instead use spantag. Here is the working example in JSFiddle.

我建议不要使用font标签，而是使用span标签。这是JSFiddle 中的工作示例。

HTML

HTML

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

JavaScript

JavaScript

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

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

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

Here is the brief description of each JavaScript function I've used in the code.

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

getElementById

getElementById

Returns the reference to the DOM element by its ID.
For more information about this function you can refer here
For alternative functions check this URL

通过其 返回对 DOM 元素的引用ID。
有关此功能的更多信息，您可以参考此处
对于替代功能，请查看此 URL

In my example, I've passed 'text', which is an IDof my SPANtag.

在我的例子中，我已经通过了'text'，这是ID我的SPAN标签。

addEventListener

添加事件监听器

Registers the specified listeneron the EventTargetit's called on, which can be any object that supports events.
For more information about this function you can refer here

listener在EventTarget调用它的 上注册指定的 ，它可以是任何支持events.
有关此功能的更多信息，您可以参考这里

In my example, I've registered init()listeneron the textobject, which will be called on loadevent.

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

setTimeout

设置超时

Calls a function or executes a code snippet after specified delay.
For more information about this function you can refer here

在指定延迟后调用函数或执行代码片段。
有关此功能的更多信息，您可以参考这里

In my example, I've passed changeColor()function as an argument, so it will be called after 3 seconds delay (Note:the delay is in milliseconds).

在我的示例中，我已将changeColor()函数作为参数传递，因此它将在 3 秒延迟后调用（注意：延迟以毫秒为单位）。

So, here is the final process:

所以，这是最后的过程：

1. The element was loaded
2. init()function was called
3. 'setTimeout()' function was called
4. 'changeColor()' function was called after 3 seconds
5. The element's color was changed

1. 元素已加载
2. init()函数被调用
3. 'setTimeout()' 函数被调用
4. 'changeColor()' 函数在 3 秒后被调用
5. 元素的颜色已更改