Код для простого таймера обратного отсчета времени?

Я хочу использовать простой таймер обратного отсчета, начиная с 30 секунд с момента запуска функции и заканчивая на 0. Без миллисекунд. Как это можно закодировать?

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 } 

Чтобы код таймера отображался в абзаце (или где-либо еще на странице), просто поместите строку:

  

где вы хотите, чтобы отображались секунды. Затем вставьте следующую строку в функцию timer() , чтобы она выглядела так:

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

Я написал этот скрипт некоторое время назад:

Применение:

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

До сих пор ответы, похоже, полагаются на запуск кода мгновенно. Если вы установите таймер на 1000 мс, на самом деле это будет около 1008 вместо.

Вот как вы должны это делать:

 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 } 

Чтобы использовать, звоните:

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

Вот еще один, если кому-то понадобится один минут и секунд:

  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

Вы можете сделать следующее с чистой JS. Вам просто нужно предоставить функцию с количеством секунд, и она сделает все остальное.

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

Расширяясь при принятом ответе, ваша машина будет спать и т. Д., Может затормозить работу таймера. Вы можете получить истинное время за счет небольшой обработки. Это даст реальное время.

   

Основываясь на решении, представленном @Layton Everson, я разработал счетчик, включающий часы, минуты и секунды:

 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

Мое решение работает с форматами даты в формате MySQL и обеспечивает функцию обратного вызова. по усложнению. Отказ от ответственности: работает только с минут и секунд, так как это то, что мне нужно.

 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}) 
  • Таймер в UpdatePanel
  • Давайте будем гением компьютера.