Обратный отсчет в секундах: миллисекунды

Question

Мне нужен текст div, чтобы он стал красным, когда вы начинаете считать, он должен длиться 3 секунды и оставить красный текст при подсчете. Затем вернитесь в нормальное состояние, когда оно закончится (и регулярные отображения при остановке 3 секунды) Отображение счета в миллисекундах.

Я пробовал, но он все еще терпит неудачу.

Answer 1

Я думаю, что если вы покажете нам свой алгоритм, это станет яснее для тех, кто хочет вам помочь. В ожидании этого, я бы порекомендовал вам посмотреть, как работает функция setInterval(), потому что она помещает задержку, поэтому вы, вероятно, будете использовать ее для достижения своей цели.

Go here для просмотра документов.

Answer 2

Что-то вроде этого?

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>

Answer 3

Это может быть сделано с помощью CSS-анимации, и добавление класса к сНу элемента.

Этот метод был бы лучше, поскольку анимация CSS не блокирует, тогда как javascript представляет собой одиночный синхронный поток (по большей части); и поэтому использование setInterval блокирует работу остальной части javascript.

Answer 4

Innovative/Альтернативный способ показать таймеры с помощью requestAnimationFrame,

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

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

DEMO

http://jsfiddle.net/wjtkr95t/

DEMO (изменить цвет) .. только .. 100мс изменить его

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

ДЕМО (изменить цвет через 2 секунды) .. только .. 100мс изменить его

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

ДЕМО (изменить цвет через 2 секунды с 700 мс цветовой анимации)

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

если у вас есть какие-либо вопросы, просто спросите