这是一个非常不寻常的要求,但是...
有没有办法让一些文本每秒钟在两种颜色之间交替显示?
因此,它看起来好像在红色和灰色之间闪烁?我不是指背景颜色,而是指实际的字体颜色。我认为它需要JavaScript或其他什么。
有什么简单的方法可以做到这一点吗?
(不考虑它可能看起来很丑)
更新
我想在我的页面上多次调用此函数,每次传递不同的颜色来与GREY交替显示。
.
这是一个非常不寻常的要求,但是...
有没有办法让一些文本每秒钟在两种颜色之间交替显示?
因此,它看起来好像在红色和灰色之间闪烁?我不是指背景颜色,而是指实际的字体颜色。我认为它需要JavaScript或其他什么。
有什么简单的方法可以做到这一点吗?
(不考虑它可能看起来很丑)
我想在我的页面上多次调用此函数,每次传递不同的颜色来与GREY交替显示。
.
根据您的请求:
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轻松实现的方法:
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以及两种交替使用的颜色。
#ffffff
这样的颜色时,它只会闪烁一次然后停止工作,只有在我输入颜色名称时才能正常工作。你有什么想法为什么会这样? - user1022585使用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示例
这里有一些简单易懂的代码。
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);
each()
函数应用于现有元素...但这只是我的做法...;) - Barrie Reader