Найпростіший можливий таймер зворотного відліку JavaScript? [зачинено]

240

Просто хотів запитати, як створити найпростіший можливий таймер зворотного відліку.

На сайті з’явиться речення із зазначенням:

"Реєстрація завершується через 05:00 хвилин!"

Отже, що я хочу зробити, це створити простий таймер зворотного відліку js, який переходить від "05:00" до "00:00", а потім скидається до "05:00", як тільки він закінчиться.

Я раніше переглядав деякі відповіді, але всі вони здаються занадто інтенсивними (об'єкти дати тощо) для того, що я хочу зробити.

javascript  timer  countdown  countdowntimer 
— Бартек
джерело
4
І знову ж таки, ви залишаєте відповідний HTML, хоча принаймні ви цього разу пояснили проблему складності. Але якщо серйозно, вам потрібно розібратися у прийнятті рішення , а потім прийти і запитати нас про проблеми, які у вас є.
— Девід каже повернути Моніку
Прикладіть приклади зі скаргами на те, як вони занадто складні? У будь-якому випадку, я думаю, ви могли б легко setIntervalі зробити це на основі .innerHTML, а не на основі дат.
— bjb568
1
Так, люди повинні самі шукати рішення. Але з javaScript є безліч прикладів виконання загальних завдань. Я знаю, як зробити таймер зворотного відліку, але я вважаю за краще, якщо я знайду його в Інтернеті (як компонент). Тож завдяки цьому питанню та обширній відповіді я знайшов те, що шукав. Логіка зворотного відліку
— Карлос Рафаель Рамірес
2
Я вважав, що ці рішення є більш простими: stackoverflow.com/questions/32141035/…
— nu everest
— Еріх Гарсія

Відповіді:

490

У мене дві демонстрації, одна з jQueryі одна без. Не використовуйте функції дати, і вони є настільки простими, як це стає.

Демо з ванільним JavaScript

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>
Розгорніть фрагмент

Демонстрація з 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);
});

Однак якщо ви хочете більш точний таймер, який лише трохи складніше:

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>
Розгорніть фрагмент

Тепер, коли ми створили декілька досить простих таймерів, ми можемо почати думати про повторну корисність та розділення проблем. Ми можемо це зробити, запитавши "що повинен робити таймер зворотного відліку?"

  • Чи повинен відлічити таймер зворотного відліку? Так
  • Чи повинен таймер зворотного відліку знати, як відобразити себе у DOM? Немає
  • Чи повинен таймер зворотного відліку знати, щоб перезапустити себе, коли він досягне 0? Немає
  • Чи повинен таймер зворотного відліку забезпечити клієнту доступ до того, скільки часу залишилось? Так

Тож маючи на увазі ці речі, давайте краще писати (але все-таки дуже просто) 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
  };
};

То чому ця реалізація краща за інші? Ось кілька прикладів того, що ви можете зробити з цим. Зауважте, що всі, крім першого прикладу, не можуть бути досягнуті startTimerфункціями.

Приклад, який відображає час у форматі XX: XX і перезапускається після досягнення 00:00

Приклад, який відображає час у двох різних форматах

Приклад, який має два різних таймера і лише один перезапуск

Приклад, який запускає таймер зворотного відліку при натисканні кнопки

— robbmj
джерело
2
Ти людина! Саме це я і шукав. Дякую! І ще одне: як я можу додати "0" перед хвилинами, щоб вона відображала "04:59", а не "4:59"?
— Bartek
1
minutes = minutes < 10 ? "0" + minutes : minutes;
— robbmj
8
@timbram мені спочатку це виглядало дивно, поки я не зрозумів, що кома після varдекларації відокремлює різні оголошення. так minutesі secondsє просто оголошеними (але неініціалізованими) змінними. так timerпросто просто дорівнює durationпараметру, нічого більше, нічого менше.
— abustamam
2
@SinanErdem Я написав код, який це робить. Я можу додати цей код до відповіді пізніше сьогодні. Я підкажу вам, коли це буде зроблено.
— robbmj
3
Як додати параметри скидання? А також паузу та відновлення? Я спробував додати поле this.reset і перевірити це у закритті. Але годинник продовжує хоч.
— Дзунг Нгуен
24

Якщо ви хочете справжнього таймера, вам потрібно використовувати об’єкт дати.

Обчисліть різницю.

Відформатуйте рядок.

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

Приклад

Jsfiddle

не такий точний таймер

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

— кокко
джерело
16

Ви можете легко створити функцію таймера за допомогою setInterval.Below - код, який ви можете використовувати його для створення таймера.

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!
Розгорніть фрагмент

— Дурай
джерело
3
Не відображає точно кожну секунду, вона відлічується дуже швидко.
— Скотт Роулі
4
Зміна 500 до 1000, здається, робить його точною.
— Скотт Роулі
Гладкий розчин, годину слід змінити на хвилину, хоча, щоб уникнути плутанини
— embulldogs99
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.