0

我有个问题。我希望将文本从黄色闪烁（或闪烁）到灰色，但我希望黄色文本的显示时间比灰色文本长。

我拥有的代码对每种颜色的工作时间相同。

function flashtext(ele,col) {
var tmpColCheck = document.getElementById( ele ).style.color;

   if (tmpColCheck === 'grey') {
       document.getElementById( ele ).style.color = col;
   } else {
       document.getElementById( ele ).style.color = 'grey';
   }
 } 

setInterval(function() {
    flashtext('flashingtext','yellow');
}, 700 ); //set an interval timer up to repeat the function

有任何想法吗？

4

2 回答 2

1

像这样的东西，你的意思是？

function flashtext(id, col) {
    var grey = true,
        el = document.getElementById(id);
    (function f() {
        grey = !grey;
        el.style.color = grey ? 'grey' : col;
        setTimeout(f, grey ? 500 : 1000);
    })();
};

演示在http://jsfiddle.net/alnitak/8LYG2/

此代码使用局部变量grey来存储当前状态，而不是尝试从元素中读取它。这既非常有效，又消除了浏览器可能将.style.color属性转换为另一种格式的风险。

然后内部闭包负责切换状态，更改元素的样式，然后以适当的超时再次递归排队。

于 2012-09-05T16:15:30.263 回答
0

您可以使用setTimeout：

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

演示：http://jsfiddle.net/EfpEP/

编辑：

但是可以稍微改进一下：

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

演示：http://jsfiddle.net/EfpEP/3/

Alnitak 有存储颜色的好主意，因为浏览器可以将其更改为另一种语法。document.getElementById但是他的代码每次都在调用。然后，按照他的想法，我认为最好的方法是：

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

演示：http://jsfiddle.net/EfpEP/4/

编辑2：

但是如果你要使用类似的东西

flashtext('flashingtext','yellow');
flashtext('flashingtext2','blue');
...

你最终会冻结浏览器。

相反，您应该使用

function FlashText(){
    var arr=[],
        cond=false,
        started=false;
    this.add=function(el,col){
        if(typeof el==='string'){el=document.getElementById(el);}
        arr.push([el.style,col]);
    }
    this.start=function(){
        if(started){return;}
        started=true;
        main();
    }
    function main(){
        cond=!cond;        
        for(var i=0,l=arr.length;i<l;i++){
            arr[i][0].color=cond?arr[i][1]:'grey';
        }
        setTimeout(main,cond?1400:700);
    };
}
var flash=new FlashText();
flash.add('flashingtext','yellow');
flash.add('flashingtext2','blue');
flash.start();

您还可以调用通过引用传递元素：（flash.add(document.getElementById('flashingtext'),'yellow')也许您有一个变量，其中包含一个没有 id 的元素）。

但尽量不要在flash.start(). 如果你这样做，元素将是黑色（或默认颜色），直到main被调用（可能是 1.4 秒）。

演示：http://jsfiddle.net/EfpEP/6/

于 2012-09-05T16:14:54.657 回答