HTML colored texts

Question

This is a rather unusual request, but ..

Is there any way to change text between two colors every second?

So it seems that it is blinking between the words ... red and gray? I do not mean the background color, I mean the actual font color. I guess it needs javascript or something like that.

Is there an easy way to do this?

(apart from the fact that he might look ugly)

UPDATE

I like to call this function several times on my page, each of which goes in a different color to alternate with GRAY

.

Answer 1

At your request:

function flashtext(ele,col) { var tmpColCheck = document.getElementById( ele ).style.color; if (tmpColCheck === 'silver') { document.getElementById( ele ).style.color = col; } else { document.getElementById( ele ).style.color = 'silver'; } } setInterval(function() { flashtext('flashingtext','red'); flashtext('flashingtext2','blue'); flashtext('flashingtext3','green'); }, 500 ); //set an interval timer up to repeat the function 

JSFiddle here: http://jsfiddle.net/neuroflux/rXVUh/14/

Answer 2

Here is an easy way to do this using regular JavaScript:

 function flash() { var text = document.getElementById('foo'); text.style.color = (text.style.color=='red') ? 'green':'red'; } var clr = setInterval(flash, 1000); 

This will alternate the text color between red and green every second. jsFiddle example.

Here is another example where you can set the colors of different elements:

 function flash(el, c1, c2) { var text = document.getElementById(el); text.style.color = (text.style.color == c2) ? c1 : c2; } var clr1 = setInterval(function() { flash('foo1', 'gray', 'red') }, 1000); var clr2 = setInterval(function() { flash('foo2', 'gray', 'blue') }, 1000); var clr3 = setInterval(function() { flash('foo3', 'gray', 'green') }, 1000); 

and jsFiddle to go with it. You pass in the identifier of the element you want to flash, and the two colors you want to alternate.

Answer 3

With JavaScript, this is very simple:

 function alternateColor(color, textId, myInterval) { if(!myInterval){ myInterval = 1000; } var colors = ['grey', color]; var currentColor = 1; document.getElementById(textId).style.color = colors[0]; setInterval(function() { document.getElementById(textId).style.color = colors[currentColor]; if (currentColor < colors.length-1) { ++currentColor; } else { currentColor = 0; } }, myInterval); } alternateColor('red','myText'); 

Call the function with the first argument being the color, the second with your text identifier, and the third with the time interval (optional). Jsfiddle example

Answer 4

Here is a simple easy to understand code.

 var count_x = 1, max_x = 5; // Change this for number of on-off flashes var flash_color_notify = setInterval(function () { /* Change the color depending if it even(= gray) or odd(=red) */ if (count_x % 2 === 0) { // even $('#element').css('color', 'gray'); } else { // odd $('#element').css('color', 'red'); } /* Clear the interval when completed blinking */ if (count_x === max_x * 2) { clearInterval(flash_color_notify); } else { count_x += 1; } }, 500);