5

这是我的代码：

<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>
.............
4

3 回答 3

19

您可以为此使用 CSS 动画：

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

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

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

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

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.

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

enter image description here

于 2013-06-26T13:15:43.400 回答
7

像这样的东西：

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

因为getElementsByTagName返回一个<p>元素数组，所以我们要选择第一个元素，with [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

于 2013-06-26T12:50:01.727 回答
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

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

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

添加事件监听器

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

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

设置超时

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

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

所以，这是最后的过程：

  1. 元素已加载
  2. init()函数被调用
  3. 'setTimeout()' 函数被调用
  4. 'changeColor()' 函数在 3 秒后被调用
  5. 元素的颜色已更改
于 2013-06-26T12:49:30.427 回答