Mã cho một bộ đếm thời gian đếm ngược JavaScript đơn giản?

Tôi muốn sử dụng đồng hồ đếm ngược đơn giản bắt đầu từ 30 giây kể từ khi chức năng được chạy và kết thúc ở mức 0. Không có mili giây. Làm thế nào nó có thể được mã hóa?

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
}

Để làm cho mã cho bộ định thời xuất hiện trong một đoạn (hoặc bất kỳ nơi nào khác trên trang), chỉ cần đặt dòng:

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

nơi bạn muốn giây xuất hiện. Sau đó chèn dòng sau vào timer()hàm của bạn , để nó trông như thế này:

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

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

Tôi đã viết kịch bản này một thời gian trước đây:

Sử dụng:

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

Cho đến nay các câu trả lời dường như dựa vào mã được chạy ngay lập tức. Nếu bạn đặt hẹn giờ trong 1000ms, nó thực sự sẽ vào khoảng 1008.

Đây là cách bạn nên làm điều đó:

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
}

Để sử dụng, hãy gọi:

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

Đây là một cái khác nếu bất cứ ai cần một phút và giây:

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

Chỉ cần sửa đổi câu trả lời của @ ClickUpvote :

Bạn có thể sử dụng IIFE (Biểu thức hàm được gọi ngay lập tức) và đệ quy để làm cho nó dễ dàng hơn một chút:

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>

Mở rộng theo câu trả lời được chấp nhận, máy của bạn sẽ chuyển sang chế độ ngủ, v.v. có thể trì hoãn bộ hẹn giờ hoạt động. Bạn có thể có được một thời gian thực sự, với chi phí xử lý một chút. Điều này sẽ cho một thời gian thực sự còn lại.

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

Bạn có thể làm như sau với JS thuần túy. Bạn chỉ cần cung cấp chức năng với số giây và nó sẽ làm phần còn lại.

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>

Dựa trên giải pháp được trình bày bởi @Layton Everson, tôi đã phát triển một bộ đếm bao gồm cả giờ, phút và giây:

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

Giải pháp của tôi hoạt động với các định dạng thời gian ngày của MySQL và cung cấp chức năng gọi lại. về sự khen ngợi. Disclaimer: chỉ hoạt động với vài phút và giây, vì đây là những gì tôi cần.

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

Vì mục đích biểu diễn, giờ đây chúng tôi có thể sử dụng requestAnimationFrame một cách an toàn để lặp nhanh, thay vì setInterval / setTimeout.

Khi sử dụng setInterval / setTimeout, nếu tác vụ vòng lặp mất nhiều thời gian hơn khoảng thời gian, trình duyệt sẽ chỉ cần mở rộng vòng lặp khoảng, để tiếp tục hiển thị đầy đủ. Điều này đang tạo ra vấn đề. Sau vài phút quá tải setInterval / setTimeout, điều này có thể đóng băng tab, trình duyệt hoặc toàn bộ máy tính.

Các thiết bị Internet có phạm vi hoạt động rộng, do đó, không thể mã hóa thời gian cố định trong một phần nghìn giây!

Sử dụng đối tượng Date , để so sánh Ngày bắt đầu Epoch và hiện tại. Đây là cách nhanh hơn mọi thứ khác, trình duyệt sẽ xử lý tất cả mọi thứ, ở mức 60FPS ổn định ( 1000/60 = 16,66ms theo khung hình ) - một phần tư chớp mắt - và nếu tác vụ trong vòng lặp yêu cầu nhiều hơn thế , trình duyệt sẽ bỏ một số lần sơn lại.

Điều này cho phép một lề trước mắt chúng ta nhận thấy ( Con người = 24FPS => 1000/24 ​​= 41,66ms theo khung = hoạt hình chất lỏng!)

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>