Question

我需要一个div的文字在你开始计数时变红，它应该持续3秒并在计数时留下红色文字。完成后返回正常（停止3秒后定期显示）以毫秒为单位显示计数。

我试过，但它仍然失败。

Answer 1

这样的东西？

＆＃13;

var foo = document.getElementById('foo');

function startCountDown(ele) {
    ele.origText = ele.innerHTML;
    ele.style.color = "red";
    ele.timeStart = (new Date()).getTime() + 3000;
    ele.intervalVar = setInterval(function() {
        var curTime = ele.timeStart - (new Date()).getTime();
        if(curTime < 0) {
            ele.innerHTML = ele.origText;
            ele.style.color = "";
            clearInterval(ele.intervalVar);
        }
        else ele.innerHTML = curTime;
        
    },20);
    
}

setTimeout(function() {startCountDown(foo);},1000);

＆＃13;

<div id = 'foo'>bar</div>

＆＃13;

Answer 2

创新/替代使用requestAnimationFrame，

显示计时器的方式

http://jsfiddle.net/wjtkr95t/4/

对浏览器的内存影响较小。它还允许您进行一些微小的修改，以便更好地控制定时器，动画......无论如何......

var
end,
now=Date.now,
raf=window.requestAnimationFrame,
duration=120000,//MS
out=document.getElementById('out');

function displayTime(){
 var c=end-now();
 out.textContent=ms2TimeString(c>0?(raf(displayTime),c):0);
}
function go(){
 end=now()+duration;
 raf(displayTime);
}

Ms to timeString function

function ms2TimeString(a,k,s,m,h){
 return k=a%1e3,
  s=a/1e3%60|0,
  m=a/6e4%60|0,
  h=a/36e5%24|0,
  (h?(h<10?'0'+h:h)+':':'')+
  (m<10?0:'')+m+':'+
  (s<10?0:'')+s+'.'+
  (k<100?k<10?'00':0:'')+k
}

https://codereview.stackexchange.com/q/45335/33435

<强>样本

http://jsfiddle.net/wjtkr95t/

DEMO（改变颜色） ..只有100ms ..改变它

http://jsfiddle.net/wjtkr95t/1/

DEMO（2秒后改变颜色） ..只需100ms ..改变它

http://jsfiddle.net/wjtkr95t/2/

DEMO（用700毫秒彩色动画改变2秒后的颜色）

http://jsfiddle.net/wjtkr95t/3/

如果您有任何问题，请询问