Basit bir JavaScript geri sayım sayacı için kod mu?

İşlevin çalıştırılmasından 30 saniye sonra başlayan ve 0'da biten basit bir geri sayım sayacı kullanmak istiyorum. Milisaniye yok. Nasıl kodlanabilir?

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
}

Zamanlayıcının kodunun bir paragrafta (veya sayfanın herhangi bir yerinde) görünmesini sağlamak için satırı koymanız yeterlidir:

<span id="timer"></span>

Saniyelerin görünmesini istediğiniz yer. Ardından aşağıdaki satırı timer()işlevinize ekleyin , böylece şöyle görünür:

function timer()
{
  count=count-1;
  if (count <= 0)
  {
     clearInterval(counter);
     return;
  }

 document.getElementById("timer").innerHTML=count + " secs"; // watch for spelling
}

Bu senaryoyu bir süre önce yazdım:

Kullanım:

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

Şimdiye kadar cevaplar, anında çalıştırılan koda dayanıyor gibi görünüyor. 1000 ms için bir zamanlayıcı ayarlarsanız, aslında bunun yerine 1008 civarında olacaktır.

İşte bunu nasıl yapmalısınız:

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
}

Kullanmak için arayın:

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

İşte dakikalar ve saniyeler için birine ihtiyacı olan biri varsa:

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

ClickUpvote'un yanıtı @ değiştirildi :

Sen kullanabilirsiniz hayatını (Hemen çağrılan işlev İfade) biraz daha kolay hale getirilmiş, özyinelemeye:

var i = 5;  //set the countdown
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        console.log(i + ' secs');  //do stuff here
        timer();
    }, 1000);
})();

var i = 5;
(function timer(){
    if (--i < 0) return;
    setTimeout(function(){
        document.getElementsByTagName('h1')[0].innerHTML = i + ' secs';
        timer();
    }, 1000);
})();

<h1>5 secs</h1>

Kabul edilen cevabın genişletilmesi, makinenizin uykuya geçmesi vb. Zamanlayıcının çalışmasını geciktirebilir. Küçük bir işlem pahasına gerçek bir zaman elde edebilirsiniz. Bu, kalan gerçek zamanı verecektir.

<span id="timer"></span>

<script>
var now = new Date();
var timeup = now.setSeconds(now.getSeconds() + 30);
//var timeup = now.setHours(now.getHours() + 1);

var counter = setInterval(timer, 1000);

function timer() {
  now = new Date();
  count = Math.round((timeup - now)/1000);
  if (now > timeup) {
      window.location = "/logout"; //or somethin'
      clearInterval(counter);
      return;
  }
  var seconds = Math.floor((count%60));
  var minutes = Math.floor((count/60) % 60);
  document.getElementById("timer").innerHTML = minutes + ":" + seconds;
}
</script>

Saf JS ile aşağıdaki işlemleri yapabilirsiniz. İşleve saniye sayısını sağlamanız yeterlidir ve gerisini o halleder.

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

<div id="time"></div>

@Layton Everson tarafından sunulan çözüme dayanarak saatleri, dakikaları ve saniyeleri içeren bir sayaç geliştirdim:

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

Çözümüm MySQL tarih ve saat biçimleriyle çalışıyor ve bir geri arama işlevi sağlıyor. complition üzerine. Feragatname: İhtiyacım olan şey bu olduğu için yalnızca dakika ve saniyelerle çalışır.

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

Performans uğruna, hızlı döngü için setInterval / setTimeout yerine artık requestAnimationFrame'i güvenle kullanabiliriz .

SetInterval / setTimeout kullanılırken, bir döngü görevi aralıktan daha uzun sürüyorsa, tarayıcı tam işlemeye devam etmek için yalnızca aralık döngüsünü uzatacaktır. Bu sorun yaratıyor. SetInterval / setTimeout dakikalarının aşırı yüklenmesinden sonra, bu sekmeyi, tarayıcıyı veya tüm bilgisayarı dondurabilir.

İnternet aygıtlarının çok çeşitli performansları vardır, bu nedenle milisaniye cinsinden sabit bir aralık süresini kodlamak oldukça imkansızdır!

Başlangıç ​​Tarihi Epoch ile geçerli olanı karşılaştırmak için Date nesnesini kullanma . Bu, her şeyden çok daha hızlıdır, tarayıcı sabit bir 60FPS'de ( 1000/60 = 16.66ms kare ) - göz açıp kapayıncaya kadar - ve döngüdeki görev bundan fazlasını gerektiriyorsa , her şeyi halleder. , tarayıcı bazı boyaları bırakacaktır.

Bu, gözlerimizin farkına varmadan önce bir marj sağlar ( İnsan = 24FPS => 1000/24 ​​= 41.66ms kareye göre = akışkan animasyon!)

https://caniuse.com/#search=requestAnimationFrame

/* Seconds to (STRING)HH:MM:SS.MS ------------------------*/
/* This time format is compatible with FFMPEG ------------*/
function secToTimer(sec){
  const o = new Date(0), p =  new Date(sec * 1000)
  return new Date(p.getTime()-o.getTime()).toString().split(" ")[4] + "." + p.getMilliseconds()
}

/* Countdown loop ----------------------------------------*/
let job, origin = new Date().getTime()
const timer = () => {
  job = requestAnimationFrame(timer)
  OUT.textContent = secToTimer((new Date().getTime() - origin) / 1000)
}

/* Start looping -----------------------------------------*/
requestAnimationFrame(timer)

/* Stop looping ------------------------------------------*/
// cancelAnimationFrame(job)

/* Reset the start date ----------------------------------*/
// origin = new Date().getTime()

span {font-size:4rem}

<span id="OUT"></span>
<br>
<button onclick="origin = new Date().getTime()">RESET</button>
<button onclick="requestAnimationFrame(timer)">RESTART</button>
<button onclick="cancelAnimationFrame(job)">STOP</button>