HTML 闪烁的文本颜色答案

【问题标题】：HTML flashing text colorsHTML 闪烁的文本颜色
【发布时间】：2012-03-06 23:04:18
【问题描述】：

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

有没有办法让一些文本每秒在 2 种颜色之间交替显示？

所以它看起来好像在...红色和灰色之间闪烁？我不是指背景颜色，我指的是实际的字体颜色。我假设它需要javascript或其他东西。

有什么简单的方法吗？

（尽管它看起来很丑）

更新

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

【问题讨论】：

标签： javascript html fonts colors

【解决方案1】：

这是使用纯 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 和要交替显示的两种颜色。

【讨论】：

可以通过id标签传递一个颜色的值吗？因为我需要在一个页面上使用不同的基色多次运行，但每次都以灰色交替显示。
您可以更改函数并传递颜色和元素以直接应用它。我将为您创建另一个示例。
这很好用，但是当我输入像#ffffff 这样的颜色时，它会闪烁一次并停止，只有当我输入名称作为颜色时才有效。知道为什么吗？

【解决方案2】：

根据您的要求：

    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/

【讨论】：

谢谢。我想做它，这样我就可以用一种颜色调用函数，它会用灰色交替该颜色。我在javascript中没用
页面会出现多处不同颜色的文字闪烁。
添加了新功能，比上一个功能更好 - 并再次编辑。
感谢我只是想在我的页面上使用它。我的页面是 php 和动态的，因此可能需要在 1 到 100 个不同的文本上运行此函数。
好吧，我会在任何需要运行 FlashingText 函数的东西上使用 CSS 类，然后使用 jQuery 来应用现有元素的函数 each() ......但这只是我...... ;)

【解决方案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

【讨论】：

【解决方案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);

【讨论】：