How to change text color after X amount of seconds

Question

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 (onLoad is only for the body/img tags):

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

Any suggestions?

Solution adopted (thanks to 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

I suggest to not use font tag, instead use span tag. Here is the working example in 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);
}

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

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

In my example, I've passed 'text', which is an ID of my SPAN tag.

addEventListener

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

In my example, I've registered init() listener on the text object, which will be called on load event.

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

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

Answer 2

Something like this:

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

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

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

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:

<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

Answer 3

You could use CSS animations for this:

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/