Código para un simple temporizador de cuenta atrás de JavaScript?

Quiero utilizar un temporizador de cuenta regresiva simple que comienza en 30 segundos desde que se ejecuta la función y termina en 0. Sin milisegundos. ¿Cómo se puede codificar?

var count=30; var counter=setInterval(timer, 1000); //1000 will run it every 1 second function timer() { count=count-1; if (count <= 0) { clearInterval(counter); //counter ended, do something here return; } //Do code for showing the number of seconds here } 

Para hacer que el código del temporizador aparezca en un párrafo (o en cualquier otro lugar de la página), simplemente ponga la línea:

  

donde quieres que aparezcan los segundos. Luego inserte la siguiente línea en su función de timer() , para que se vea así:

 function timer() { count=count-1; if (count <= 0) { clearInterval(counter); return; } document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling } 

Escribí este guión hace un tiempo:

Uso:

 var myCounter = new Countdown({ seconds:5, // number of seconds to count down onUpdateStatus: function(sec){console.log(sec);}, // callback for each second onCounterEnd: function(){ alert('counter ended!');} // final action }); myCounter.start(); 

 function Countdown(options) { var timer, instance = this, seconds = options.seconds || 10, updateStatus = options.onUpdateStatus || function () {}, counterEnd = options.onCounterEnd || function () {}; function decrementCounter() { updateStatus(seconds); if (seconds === 0) { counterEnd(); instance.stop(); } seconds--; } this.start = function () { clearInterval(timer); timer = 0; seconds = options.seconds; timer = setInterval(decrementCounter, 1000); }; this.stop = function () { clearInterval(timer); }; } 

Hasta ahora, las respuestas parecen depender de que el código se ejecute al instante. Si configura un temporizador por 1000 ms, en realidad será alrededor de 1008.

Aquí es cómo debes hacerlo:

 function timer(time,update,complete) { var start = new Date().getTime(); var interval = setInterval(function() { var now = time-(new Date().getTime()-start); if( now <= 0) { clearInterval(interval); complete(); } else update(Math.floor(now/1000)); },100); // the smaller this number, the more accurate the timer will be } 

Para usar, llama:

 timer( 5000, // milliseconds function(timeleft) { // called every step to update the visible countdown document.getElementById('timer').innerHTML = timeleft+" second(s)"; }, function() { // what to do after alert("Timer complete!"); } ); 

Aquí hay otro si alguien necesita uno por minutos y segundos:

  var mins = 10; //Set the number of minutes you need var secs = mins * 60; var currentSeconds = 0; var currentMinutes = 0; /* * The following line has been commented out due to a suggestion left in the comments. The line below it has not been tested. * setTimeout('Decrement()',1000); */ setTimeout(Decrement,1000); function Decrement() { currentMinutes = Math.floor(secs / 60); currentSeconds = secs % 60; if(currentSeconds <= 9) currentSeconds = "0" + currentSeconds; secs--; document.getElementById("timerText").innerHTML = currentMinutes + ":" + currentSeconds; //Set the element id you need the time put into. if(secs !== -1) setTimeout('Decrement()',1000); } 
 // Javascript Countdown // Version 1.01 6/7/07 (1/20/2000) // by TDavid at http://www.tdscripts.com/ var now = new Date(); var theevent = new Date("Sep 29 2007 00:00:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; ID = window.setTimeout("update();", 1000); function update() { now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; ID = window.setTimeout("update();", 1000); } 
 

Countdown To January 31, 2000, at 12:00:

Days Hours Minutes Seconds

Puedes hacer lo siguiente con JS puro. Solo necesita proporcionar la función con el número de segundos y hará el rest.

 var insertZero = n => n < 10 ? "0"+n : ""+n, displayTime = n => n ? time.textContent = insertZero(~~(n/3600)%3600) + ":" + insertZero(~~(n/60)%60) + ":" + insertZero(n%60) : time.textContent = "IGNITION..!", countDownFrom = n => (displayTime(n), setTimeout(_ => n ? sid = countDownFrom(--n) : displayTime(n), 1000)), sid; countDownFrom(3610); setTimeout(_ => clearTimeout(sid),20005); 
 

Expandir la respuesta aceptada, que la máquina se quede dormida, etc. puede retrasar el funcionamiento del temporizador. Puede obtener un tiempo verdadero, a cambio de un poco de procesamiento. Esto le dará un tiempo verdadero a la izquierda.

   

En base a la solución presentada por @Layton Everson, desarrollé un contador que incluye horas, minutos y segundos:

 var initialSecs = 86400; var currentSecs = initialSecs; setTimeout(decrement,1000); function decrement() { var displayedSecs = currentSecs % 60; var displayedMin = Math.floor(currentSecs / 60) % 60; var displayedHrs = Math.floor(currentSecs / 60 /60); if(displayedMin <= 9) displayedMin = "0" + displayedMin; if(displayedSecs <= 9) displayedSecs = "0" + displayedSecs; currentSecs--; document.getElementById("timerText").innerHTML = displayedHrs + ":" + displayedMin + ":" + displayedSecs; if(currentSecs !== -1) setTimeout(decrement,1000); } 
 // Javascript Countdown // Version 1.01 6/7/07 (1/20/2000) // by TDavid at http://www.tdscripts.com/ var now = new Date(); var theevent = new Date("Nov 13 2017 22:05:01"); var seconds = (theevent - now) / 1000; var minutes = seconds / 60; var hours = minutes / 60; var days = hours / 24; ID = window.setTimeout("update();", 1000); function update() { now = new Date(); seconds = (theevent - now) / 1000; seconds = Math.round(seconds); minutes = seconds / 60; minutes = Math.round(minutes); hours = minutes / 60; hours = Math.round(hours); days = hours / 24; days = Math.round(days); document.form1.days.value = days; document.form1.hours.value = hours; document.form1.minutes.value = minutes; document.form1.seconds.value = seconds; ID = window.setTimeout("update();", 1000); } 
 

Countdown To January 31, 2000, at 12:00:

Days Hours Minutes Seconds

Mi solución funciona con los formatos de fecha y hora de MySQL y proporciona una función de callback. en la comstackción. Descargo de responsabilidad: funciona solo con minutos y segundos, ya que esto es lo que necesitaba.

 jQuery.fn.countDownTimer = function(futureDate, callback){ if(!futureDate){ throw 'Invalid date!'; } var currentTs = +new Date(); var futureDateTs = +new Date(futureDate); if(futureDateTs <= currentTs){ throw 'Invalid date!'; } var diff = Math.round((futureDateTs - currentTs) / 1000); var that = this; (function countdownLoop(){ // Get hours/minutes from timestamp var m = Math.floor(diff % 3600 / 60); var s = Math.floor(diff % 3600 % 60); var text = zeroPad(m, 2) + ':' + zeroPad(s, 2); $(that).text(text); if(diff <= 0){ typeof callback === 'function' ? callback.call(that) : void(0); return; } diff--; setTimeout(countdownLoop, 1000); })(); function zeroPad(num, places) { var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; } } // $('.heading').countDownTimer('2018-04-02 16:00:59', function(){ // on complete}) 
Intereting Posts