HTML闪烁文本颜色

Question

这是一个非常不寻常的要求，但是......

反正是否每秒都要在两种颜色之间交替使用一些文字？

所以它似乎在说...红色和灰色之间闪烁？我不是指背景颜色，我的意思是实际的字体颜色。我假设它需要javascript或其他东西。

有没有简单的方法呢？

（无视它看起来很难看的事实）

更新

我喜欢在我的页面上多次调用此函数，每个函数都传递不同的颜色以与GRAY交替

Answer 1

根据您的要求：

    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：http://jsfiddle.net/neuroflux/rXVUh/14/

Answer 2

使用纯JavaScript可以轻松实现此目的：

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

这将每秒在红色和绿色之间交替显示文本的颜色。 jsFiddle 示例。

这是另一个可以设置不同元素颜色的示例：

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

和 jsFiddle 一起使用它。您传递要闪烁的元素的ID以及两种颜色之间的交替。

Answer 3

使用JavaScript非常简单：

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');

使用第一个参数为颜色调用函数，第二个参数是文本的ID，第三个是间隔时间（可选）。 Jsfiddle example

Answer 4

这是一些简单易懂的代码。

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's 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);