Самый простой возможный таймер обратного отсчета времени?

Просто хотел спросить, как создать простейший возможный таймер обратного отсчета.

На сайте будет предложение:

"Регистрация закрывается в 05:00 минут!"

Итак, я хочу создать простой таймер обратного отсчета js, который начинается с "05:00" до "00:00", а затем сбрасывается до "05:00" после его завершения.

Раньше я встречал некоторые ответы, но все они кажутся слишком интенсивными (объекты Date и т.д.) для того, что я хочу сделать.

Ответы

Ответ 1

У меня есть две демонстрации, одна с jQuery и одна без. Не использовать функции даты и не так просто, как это получается.

Демо с ванильным JavaScript

function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10)
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

<body>
    <div>Registration closes in <span id="time">05:00</span> minutes!</div>
</body>

Ответ 2

Если вам нужен реальный таймер, вам нужно использовать объект даты.

Рассчитайте разницу.

Отформатируйте строку.

window.onload=function(){
      var start=Date.now(),r=document.getElementById('r');
      (function f(){
      var diff=Date.now()-start,ns=(((3e5-diff)/1e3)>>0),m=(ns/60)>>0,s=ns-m*60;
      r.textContent="Registration closes in "+m+':'+((''+s).length>1?'':'0')+s;
      if(diff>3e5){
         start=Date.now()
      }
      setTimeout(f,1e3);
      })();
}

Пример

Jsfiddle

не столь точный таймер

var time=5*60,r=document.getElementById('r'),tmp=time;

setInterval(function(){
    var c=tmp--,m=(c/60)>>0,s=(c-m*60)+'';
    r.textContent='Registration closes in '+m+':'+(s.length>1?'':'0')+s
    tmp!=0||(tmp=time);
},1000);

JsFiddle

Ответ 3

Вы можете легко создать функцию таймера с помощью setInterval.Below - это код, который вы можете использовать для создания таймера.

http://jsfiddle.net/ayyadurai/GXzhZ/1/

   <div>
   Registration closes in <span id="timer">05:00<span> minutes!
   </div>

   <script>
   window.onload = function(){
     var hou = 2;
     var sec = 60;
     setInterval(function(){

       document.getElementById("timer").innerHTML = hou +" : " + sec ;
       sec--;
       if(sec == 00)
       {
         hou--;
         sec = 60;
         if (hou == 0)
         {
            hou = 2;
         }
       }
      },500);
    }
    </script>