Penghitung waktu mundur JavaScript yang paling sederhana? [Tutup]

240

Hanya ingin bertanya bagaimana cara membuat penghitung waktu mundur sesederhana mungkin.

Akan ada kalimat di situs yang mengatakan:

"Pendaftaran ditutup dalam 05:00 menit!"

Jadi, apa yang ingin saya lakukan adalah membuat penghitung waktu mundur js sederhana yang berlangsung dari "05:00" menjadi "00:00" dan kemudian mengatur ulang ke "05:00" setelah berakhir.

Saya telah melalui beberapa jawaban sebelumnya, tetapi semuanya tampak terlalu intens (objek Date, dll) untuk apa yang ingin saya lakukan.

javascript timer countdown countdowntimer Bartek
sumber
4
Dan lagi, Anda meninggalkan HTML yang relevan, meskipun setidaknya Anda telah menjelaskan masalah kompleksitas kali ini. Tapi serius, Anda perlu melihat ke dalam membuat solusi sendiri , dan kemudian datang dan bertanya kepada kami tentang masalah yang Anda hadapi.
David mengatakan mengembalikan Monica
Contoh kode dengan keluhan tentang bagaimana mereka terlalu rumit? Pokoknya, saya pikir Anda bisa dengan mudah setIntervaldan membuatnya. Berbasis HTML, bukan berdasarkan tanggal.
bjb568
1
Ya, orang harus mencari solusi sendiri. Tetapi dengan javaScript ada banyak contoh melakukan tugas-tugas umum. Saya tahu cara melakukan penghitung waktu mundur, tetapi saya lebih suka jika saya menemukannya di web (seperti komponen). Jadi berkat pertanyaan ini dan jawaban yang luas saya menemukan apa yang saya cari. Logika hitung mundur
Carlos Rafael Ramirez
2
Saya menemukan solusi ini lebih sederhana: stackoverflow.com/questions/32141035/…
nu everest
Lihat ini: sitepoint.com/build-javascript-countdown-timer-no-dependencies
Erich García

Jawaban:

491

Saya punya dua demo, satu dengan jQuerydan satu tanpa. Tidak menggunakan fungsi tanggal dan sesederhana mungkin.

Demo dengan JavaScript vanilla

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>
Luaskan cuplikan

Demo dengan jQuery 

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.text(minutes + ":" + seconds);

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

jQuery(function ($) {
    var fiveMinutes = 60 * 5,
        display = $('#time');
    startTimer(fiveMinutes, display);
});

Namun, jika Anda menginginkan timer yang lebih akurat, itu hanya sedikit lebih rumit:

function startTimer(duration, display) {
    var start = Date.now(),
        diff,
        minutes,
        seconds;
    function timer() {
        // get the number of seconds that have elapsed since 
        // startTimer() was called
        diff = duration - (((Date.now() - start) / 1000) | 0);

        // does the same job as parseInt truncates the float
        minutes = (diff / 60) | 0;
        seconds = (diff % 60) | 0;

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

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

        if (diff <= 0) {
            // add one second so that the count down starts at the full duration
            // example 05:00 not 04:59
            start = Date.now() + 1000;
        }
    };
    // we don't want to wait a full second before the timer starts
    timer();
    setInterval(timer, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};
<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>
Luaskan cuplikan

Sekarang kami telah membuat beberapa penghitung waktu yang cukup sederhana, kami dapat mulai berpikir tentang kegunaan kembali dan memisahkan masalah. Kita dapat melakukan ini dengan bertanya "apa yang harus dilakukan penghitung waktu mundur?"

  • Haruskah penghitung waktu mundur mundur? Iya
  • Haruskah penghitung waktu mundur tahu cara menampilkan dirinya pada DOM? Tidak
  • Haruskah penghitung waktu mundur tahu untuk memulai kembali sendiri ketika mencapai 0? Tidak
  • Haruskah penghitung waktu mundur menyediakan cara bagi klien untuk mengakses berapa banyak waktu yang tersisa? Iya

Jadi dengan hal-hal ini dalam pikiran mari kita menulis yang lebih baik (tapi masih sangat sederhana) CountDownTimer

function CountDownTimer(duration, granularity) {
  this.duration = duration;
  this.granularity = granularity || 1000;
  this.tickFtns = [];
  this.running = false;
}

CountDownTimer.prototype.start = function() {
  if (this.running) {
    return;
  }
  this.running = true;
  var start = Date.now(),
      that = this,
      diff, obj;

  (function timer() {
    diff = that.duration - (((Date.now() - start) / 1000) | 0);

    if (diff > 0) {
      setTimeout(timer, that.granularity);
    } else {
      diff = 0;
      that.running = false;
    }

    obj = CountDownTimer.parse(diff);
    that.tickFtns.forEach(function(ftn) {
      ftn.call(this, obj.minutes, obj.seconds);
    }, that);
  }());
};

CountDownTimer.prototype.onTick = function(ftn) {
  if (typeof ftn === 'function') {
    this.tickFtns.push(ftn);
  }
  return this;
};

CountDownTimer.prototype.expired = function() {
  return !this.running;
};

CountDownTimer.parse = function(seconds) {
  return {
    'minutes': (seconds / 60) | 0,
    'seconds': (seconds % 60) | 0
  };
};

Jadi mengapa implementasi ini lebih baik daripada yang lain? Berikut adalah beberapa contoh dari apa yang dapat Anda lakukan dengannya. Perhatikan bahwa semua kecuali contoh pertama tidak dapat dicapai oleh startTimerfungsi.

Contoh yang menampilkan waktu dalam format XX: XX dan memulai kembali setelah mencapai 00:00

Contoh yang menampilkan waktu dalam dua format berbeda

Contoh yang memiliki dua timer berbeda dan hanya satu restart

Contoh yang memulai penghitung waktu mundur ketika tombol ditekan

robbmj
sumber
2
Kamulah orangnya! Itulah tepatnya yang saya cari. Terima kasih! Satu hal lagi: bagaimana saya bisa menambahkan "0" di depan menit, jadi ini menunjukkan "04:59", bukannya "4:59"?
Bartek
1
minutes = minutes < 10 ? "0" + minutes : minutes;
robbmj
8
@timbram itu tampak aneh bagi saya pada awalnya juga, sampai saya menyadari bahwa koma setelah vardeklarasi memisahkan deklarasi yang berbeda. begitu minutesdan secondshanya dideklarasikan (tetapi tidak diinisialisasi) variabel. begitu timerjuga dengan durationparameternya, tidak lebih, tidak kurang.
abustamam
2
@ SinanErdem Saya telah menulis beberapa kode yang melakukan ini. Saya dapat menambahkan kode itu ke jawabannya hari ini. Saya akan ping Anda ketika ini selesai.
robbmj
3
Bagaimana Anda menambahkan opsi reset? Dan juga jeda dan lanjutkan? Saya mencoba menambahkan bidang this.reset, dan periksa di penutupan. Namun jam terus berjalan.
Dzung Nguyen
24

Jika Anda ingin timer nyata, Anda perlu menggunakan objek tanggal.

Hitung perbedaannya.

Format string Anda.

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

Contoh

Jsfiddle

Timer tidak begitu tepat

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

cocco
sumber
16

Anda dapat dengan mudah membuat fungsionalitas timer dengan menggunakan setInterval.Berikut adalah kode yang dapat Anda gunakan untuk membuat timer.

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

window.onload = function() {
  var minute = 5;
  var sec = 60;
  setInterval(function() {
    document.getElementById("timer").innerHTML = minute + " : " + sec;
    sec--;
    if (sec == 00) {
      minute --;
      sec = 60;
      if (minute == 0) {
        minute = 5;
      }
    }
  }, 1000);
}
Registration closes in <span id="timer">05:00<span> minutes!
Luaskan cuplikan

Durai
sumber
3
Tidak secara akurat mewakili setiap detik, itu menghitung mundur terlalu cepat.
Scott Rowley
4
Mengubah 500 hingga 1000 tampaknya membuatnya akurat.
Scott Rowley
Solusi yang apik, jam harus diubah menjadi menit sekalipun untuk menghindari kebingungan
embulldogs99