How to change text color after X 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 the color (red) of each individual text after some time?

I tried this code, but obviously it does not work ( onLoad is only for body / img tags):

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

Any suggestions?

The decision is made (thanks 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

You can 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 determined by 3s , which is 3 seconds.

Btw, if you do not want the timer to execute when the page loads, but instead want it to be triggered by some subsequent event (for example, by a user click), you can define the animation in the CSS class, and then just add this class to element later with JavaScript to trigger the effect.

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

Answer 2

Something like that:

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

Since getElementsByTagName returns an array of <p> elements, we want to select the first with [0] , because the number of arrays starts at 0.

You may need to change the getElementsByTagName part to a <span> . Alternatively, there getElementById .

getElementsByClassName

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

 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 will look like this:

 <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 in the example on this page: http://www.developphp.com/view_lesson.php?v=881

Answer 3

I suggest not using the font tag, use the span tag instead. Here is a 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 a brief description of each JavaScript function that I used in the code.

getElementById

Returns a reference to the DOM element by ID .
For more information about this feature, you can contact here.
For alternate features, check this URL

In my example, I went through 'text' , which is the ID my span tag.

addEventListener

Registers the specified listener in the called EventTarget , which can be any object that supports events .
For more information about this feature, you can contact here.

In my example, I registered init() listener in a text object that will be called in the load event.

Settimeout

Calls a function or executes a piece of code after the specified delay.
For more information about this feature, you can contact here.

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

So here is the final process:

• Item uploaded
• init() function was called
• The setTimeout () function was called
• 'changeColor () function was called after 3 seconds
• Item color changed