If you want to add flashing text on your website, you can achieve it by using the setTimeout function in JavaScript. Here is a simple example:
function flashtext(ele, col) {
var tmpColCheck = document.getElementById(ele).style.color,
time;
if (tmpColCheck === 'grey') {
document.getElementById(ele).style.color = col;
time = 1400;
} else {
document.getElementById(ele).style.color = 'grey';
time = 700;
}
setTimeout(function() { flashtext('flashingtext', 'yellow') }, time);
}
flashtext('flashingtext', 'yellow');
If you want to see a demo of this in action, check out this DEMO: http://jsfiddle.net/EfpEP/
Enhanced Version:
Here is an improved version of the function that optimizes the code:
function flashtext(ele, col) {
var style = document.getElementById(ele).style;
(function main() {
var cond = style.color === 'grey';
style.color = cond ? col : 'grey';
setTimeout(main, cond ? 1400 : 700);
})();
}
flashtext('flashingtext', 'yellow');
For a better demonstration of this enhanced version, visit this DEMO: http://jsfiddle.net/EfpEP/3/
It's important to note that storing the color value can prevent potential browser inconsistencies. To further improve the function, consider the following approach:
function flashtext(ele, col) {
var style = document.getElementById(ele).style,
cond = style.color === 'grey';
(function main() {
cond = !cond;
style.color = cond ? col : 'grey';
setTimeout(main, cond ? 1400 : 700);
})();
}
flashtext('flashingtext', 'yellow');
Explore the updated version with this DEMO: http://jsfiddle.net/EfpEP/4/
Further Optimization:
If you plan to apply flashing text to multiple elements simultaneously, consider using the following approach to prevent browser freezing:
// Code snippet for optimized flashing text functionality
To see this in action, check out the DEMO: http://jsfiddle.net/EfpEP/6/