倒计时秒数：毫秒

问题描述：

我需要一个div的文本在开始计数时变成红色，它应该持续3秒，并在计数时保留红色文本。然后在完成时返回正常状态（停止3秒后显示常规显示）显示以毫秒为单位的计数。倒计时秒数：毫秒

我试过了，但仍然失败。

您究竟做了什么？你能发布你使用的代码吗？ – leopik 2014-09-23 12:48:46

你是什么意思“当你开始计数”？ – Tim 2014-09-23 12:54:29

答

我想如果你向我们展示你的算法，那么任何想要帮助你的人都会更清楚。等待它，我会建议你看看功能setInterval()是如何工作的，因为它会延迟，所以你可能会用它来达到你的目标。

去here看文档。

答

像这样的东西？

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

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

答

这可以通过使用CSS动画，并添加类div元素来完成。

这个方法会更好，因为CSS动画不会阻塞，而javascript是单线程同步的（大部分情况下）;所以使用setInterval会阻止其余的javascript运行。

答

使用显示计时器创新/另类方式，

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

至极有浏览器的memory.It影响较小，您还可以有一些小的修改，有超过定时器，动画的更多控制...什么...

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

向女士TIMESTRING功能

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

DEMO

http://jsfiddle.net/wjtkr95t/

DEMO（改变颜色） ..仅100毫秒..改变它

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

DEMO（改变颜色2秒后） ..仅100毫秒..改变它

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

DEMO

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

（2秒，700毫秒彩色动画完成后，改变颜色）

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

倒计时秒数：毫秒

相关推荐