Codice per un semplice timer conto alla rovescia per JavaScript?

Voglio utilizzare un semplice conto alla rovescia che inizia a 30 secondi da quando la funzione viene eseguita e termina a 0. Nessun millisecondo. Come può essere codificato?

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 } 

Per rendere il codice per il timer visualizzato in un paragrafo (o in qualsiasi altro punto della pagina), basta mettere la linea:

  

dove vuoi che i secondi appaiano. Quindi inserisci la seguente riga nella tua funzione timer() , quindi assomiglia a questa:

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

Ho scritto questo script qualche tempo fa:

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

Finora le risposte sembrano affidarsi al fatto che il codice viene eseguito all’istante. Se imposti un timer per 1000 ms, sarà invece intorno a 1008.

Ecco come dovresti farlo:

 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 } 

Per usare, chiama:

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

Eccone un altro se qualcuno ne ha bisogno per minuti e secondi:

  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

Puoi fare come segue con puro JS. Hai solo bisogno di fornire la funzione con il numero di secondi e farà il resto.

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

Espandendo la risposta accettata, la macchina che va a dormire ecc. Può ritardare il funzionamento del timer. È ansible ottenere un tempo reale, al costo di una piccola elaborazione. Questo darà un vero tempo rimasto.

   

Sulla base della soluzione presentata da @Layton Everson ho sviluppato un contatore che include ore, minuti e secondi:

 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

La mia soluzione funziona con i formati di data e ora di MySQL e fornisce una funzione di callback. sulla gratitudine. Disclaimer: funziona solo con minuti e secondi, in quanto è ciò di cui avevo bisogno.

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