倒计时(秒）:毫秒

Countdown in seconds: milliseconds

本文关键字：毫秒 倒计时      更新时间：2023-09-26

当你开始计数时，我需要一个div的文本变成红色，它应该持续3秒，并在计数时留下红色文本。然后在结束时恢复正常（停止3秒时正常显示）以毫秒为单位显示计数。

我试过了，但还是失败了。

类似的东西？

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>

使用requestAnimationFrame、显示计时器的创新/替代方式

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

wich对浏览器内存的影响较小。它还允许您进行一些小的修改，以便对计时器、动画。。。无论什么

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到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

演示

http://jsfiddle.net/wjtkr95t/

DEMO（更改颜色）。。只有100ms。。更改

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

演示（2秒后更改颜色）。。只有100ms。。更改

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

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

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

如果您有任何问题，只需询问

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

转到此处查看文档。

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

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

相关文章：