Kode untuk penghitung waktu mundur JavaScript sederhana?


147

Saya ingin menggunakan penghitung waktu mundur sederhana yang dimulai pada 30 detik dari saat fungsi dijalankan dan berakhir pada 0. Tidak ada milidetik. Bagaimana bisa dikodekan?

Jawaban:


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

Untuk membuat kode penghitung waktu muncul dalam paragraf (atau di mana pun pada halaman), cukup tulis baris:

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

di mana Anda ingin detik muncul. Kemudian masukkan baris berikut dalam timer()fungsi Anda , sehingga terlihat seperti ini:

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

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

Terima kasih atas jawabannya. Saya mengalami kesulitan menggunakannya karena timer saya muncul dalam paragraf. Bagaimana saya bisa menempatkan 30, 29, 28, dll di tengah paragraf?
Mike

1
Saya mengedit jawaban saya untuk menunjukkan kepada Anda bagaimana menampilkan timer dalam paragraf :)
Klik Upvote

2
Di tengah paragraf (horizontal): <p id = "timer" style = "text-align: center"> </p>
Alsciende

Klik, timer Anda hanya akan menampilkan "0 detik". Anda harus meletakkan pembaruan innerHTML setelah dekrementasi, bukan pada akhirnya.
Alsciende

1
Hai, bagaimana saya bisa menghentikan timer berjalan di halaman memuat dan sebagai gantinya hanya ketika tombol ditekan? Juga bagaimana saya bisa mengatur ulang pewaktu ketika tombol ditekan setelah penghitung waktu sudah turun?
crmepham

104

Saya menulis skrip ini beberapa waktu lalu:

Pemakaian:

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

1
Saya ingin menggunakan ini daripada yang lain. Ketika saya terjebak untuk memulai kembali angka awal, saya melihat ini berfungsi dengan baik ..
Oki Erie Rinaldi

Jika saya harus menghentikan timer secara kebetulan, bagaimana saya melakukannya?
SIJ

@SIJ myCounter.stop();
R3tep

54

Sejauh ini jawabannya tampaknya bergantung pada kode yang sedang dijalankan secara instan. Jika Anda mengatur timer untuk 1000 ms, itu sebenarnya akan menjadi sekitar 1008.

Inilah cara Anda harus melakukannya:

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
}

Untuk menggunakan, hubungi:

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

2
Temukan, seperti yang Anda katakan itu satu-satunya cara untuk melakukannya dengan benar!
McCella

3
Saya memberikan acungan jempol, dengan satu peringatan - untuk tujuan tampilan Anda mungkin ingin menunjukkan langit-langit (Math.ceil ()) bukan lantai. Ini benar-benar membingungkan ketika jam mencapai 0 detik sebelum peringatan menyala. (Maka tentu saja perlu ada panggilan tambahan untuk memperbarui () sebelum selesai ())
Paul Williams

21

Ini satu lagi jika ada yang membutuhkan satu menit dan detik:

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

Anda tidak harus meneruskan string ke parameter pertama setTimeout, setTimeout(Decrement, 1000)lebih disukai. stackoverflow.com/questions/6232574/…
Scottux

Terima kasih atas sarannya, saya telah memperbarui skripnya.
Layton Everson

3

// 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);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>


8
Script ini menggunakan praktik yang sangat buruk dari tahun 90-an. Dan juga 1,5 jam bukan 2 jam. Ini 1 jam 30 mnt. Anda harus menggunakan Math.floor, bukanMath.round
corbacho

3

Baru dimodifikasi @ jawaban ClickUpvote :

Anda dapat menggunakan IIFE (Ekspresi Fungsi yang Segera Diminta) dan rekursi untuk membuatnya sedikit lebih mudah:

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


2

Memperluas jawaban yang diterima, mesin Anda akan tidur, dll. Dapat menunda timer agar tidak berfungsi. Anda bisa mendapatkan waktu yang sebenarnya, dengan biaya pemrosesan yang sedikit. Ini akan memberikan waktu yang tersisa.

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

0

Anda dapat melakukan hal berikut dengan JS murni. Anda hanya perlu menyediakan fungsi dengan jumlah detik dan itu akan melakukan sisanya.

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>


0

Berdasarkan solusi yang disajikan oleh @Layton Everson I mengembangkan penghitung termasuk jam, menit dan detik:

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

0

// 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);
}
<p><font face="Arial" size="3">Countdown To January 31, 2000, at 12:00: </font>
</p>
<form name="form1">
  <p>Days
    <input type="text" name="days" value="0" size="3">Hours
    <input type="text" name="hours" value="0" size="4">Minutes
    <input type="text" name="minutes" value="0" size="7">Seconds
    <input type="text" name="seconds" value="0" size="7">
  </p>
</form>


0

Solusi saya berfungsi dengan format waktu tanggal MySQL dan menyediakan fungsi panggilan balik. pada komplain. Penafian: hanya berfungsi dengan menit dan detik, karena inilah yang saya butuhkan.

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

0

Demi kinerja, kita sekarang dapat menggunakan requestAnimationFrame dengan aman untuk perulangan cepat, alih-alih setInterval / setTimeout.

Saat menggunakan setInterval / setTimeout, jika tugas loop mengambil lebih banyak waktu daripada interval, browser hanya akan memperpanjang loop interval, untuk melanjutkan rendering penuh. Ini menciptakan masalah. Setelah beberapa menit setInterval / setTimeout kelebihan, ini dapat membekukan tab, browser, atau seluruh komputer.

Perangkat Internet memiliki beragam kinerja, sehingga sangat mustahil untuk melakukan hardcode waktu interval tetap dalam milidetik!

Menggunakan objek Tanggal , untuk membandingkan mulai Tanggal Epoch dan saat ini. Ini jauh lebih cepat daripada yang lainnya, browser akan menangani semuanya, pada 60FPS yang stabil ( 1000/60 = 16.66ms per frame ) - seperempat kedipan mata - dan jika tugas dalam loop membutuhkan lebih dari itu , browser akan menjatuhkan beberapa repaints.

Ini memungkinkan margin di depan mata kita memperhatikan ( Manusia = 24FPS => 1000/24 ​​= 41.66ms by frame = animasi cair!)

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>

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.