HTML 闪烁文本颜色

Question

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

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

因此，它看起来好像在红色和灰色之间闪烁？我不是指背景颜色，而是指实际的字体颜色。我认为它需要JavaScript或其他什么。

有什么简单的方法可以做到这一点吗？

（不考虑它可能看起来很丑）

更新

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

.

- user1022585

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/

- Barrie Reader

---

谢谢。我想让函数可以根据颜色调用，并将其与灰色交替显示。我在JavaScript方面很无能。 - user1022585

页面上会有几个带有不同颜色闪光的文本。 - user1022585

添加了新的函数，比之前的更好用-并且再次进行了编辑。 - Barrie Reader

谢谢，我只是想在我的页面上使用它。我的页面是用PHP编写的，并且是动态的，因此可能需要对1到100个不同的文本运行此函数。 - user1022585

嗯，我会在需要运行FlashingText函数的任何地方使用CSS类，然后使用jQuery将each()函数应用于现有元素...但这只是我的做法...;) - Barrie Reader

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以及两种交替使用的颜色。

- j08691

---

可以通过id标签传递颜色值吗？因为我需要在页面上多次运行此操作，使用不同的基础颜色，但每个颜色都与灰色交替。 - user1022585

你可以更改函数并直接传递颜色和要应用它的元素。我会为您创建另一个示例。 - j08691

这个程序运行良好，但是当我输入像 #ffffff 这样的颜色时，它只会闪烁一次然后停止工作，只有在我输入颜色名称时才能正常工作。你有什么想法为什么会这样？ - user1022585

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示例

- HellaMad

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

- dragonfire