Der einfachste JavaScript-Countdown-Timer? [geschlossen]

240

Ich wollte nur fragen, wie man den einfachsten Countdown-Timer erstellt.

Auf der Website wird ein Satz angezeigt, der besagt:

"Die Registrierung endet in 05:00 Minuten!"

Ich möchte also einen einfachen js-Countdown-Timer erstellen, der von "05:00" bis "00:00" reicht und nach dem Ende auf "05:00" zurückgesetzt wird.

Ich habe bereits einige Antworten durchgesehen, aber alle scheinen zu intensiv (Datumsobjekte usw.) für das zu sein, was ich tun möchte.

— Bartek
quelle

Und wieder lassen Sie den relevanten HTML-Code weg, obwohl Sie diesmal zumindest das Komplexitätsproblem erklärt haben. Aber im Ernst, Sie brauchen , um zu schauen eine Lösung selbst zu machen , und dann kommen und fragen Sie uns über Probleme Sie haben.

— David sagt, Monica

Codebeispiele mit Beschwerden darüber, wie sie zu kompliziert sind? Wie auch immer, ich denke, Sie könnten es einfach setIntervalund .innerHTML-basiert machen, anstatt datumsbasiert.

— bjb568

Ja, die Leute sollten versuchen, die Lösung selbst zu finden. Mit JavaScript gibt es jedoch viele Beispiele für allgemeine Aufgaben. Ich weiß, wie man einen Countdown-Timer macht, aber ich bevorzuge es, wenn ich einen im Web finde (wie eine Komponente). Dank dieser Frage und der ausführlichen Antwort habe ich gefunden, wonach ich gesucht habe. Countdown-Logik

— Carlos Rafael Ramirez

Ich fand diese Lösungen einfacher: stackoverflow.com/questions/32141035/…

— nu everest

Schauen Sie sich das an: sitepoint.com/build-javascript-countdown-timer-no-dependencies

— Erich García

Antworten:

489

Ich habe zwei Demos, eine mit jQueryund eine ohne. Weder verwenden Datumsfunktionen und sind so einfach wie es nur geht.

Demo mit Vanille 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>

Erweitern Sie das Snippet

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

Wenn Sie jedoch einen genaueren Timer wünschen, der nur geringfügig komplizierter ist:

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>

Erweitern Sie das Snippet

Nachdem wir einige ziemlich einfache Timer erstellt haben, können wir über die Wiederverwendbarkeit und die Trennung von Bedenken nachdenken. Wir können dies tun, indem wir fragen: "Was soll ein Countdown-Timer tun?"

Sollte ein Countdown-Timer herunterzählen? Ja
Sollte ein Countdown-Timer wissen, wie er sich im DOM anzeigt? Nein
Sollte ein Countdown-Timer wissen, dass er sich neu startet, wenn er 0 erreicht? Nein
Sollte ein Countdown-Timer einem Client die Möglichkeit bieten, auf die verbleibende Zeit zuzugreifen? Ja

In Anbetracht dieser Dinge können wir also ein besseres (aber immer noch sehr einfaches) schreiben. 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
  };
};

Warum ist diese Implementierung besser als die anderen? Hier sind einige Beispiele, was Sie damit machen können. Beachten Sie, dass die startTimerFunktionen bis auf das erste Beispiel nicht alle erreichen können.

Ein Beispiel, das die Uhrzeit im XX: XX-Format anzeigt und nach Erreichen von 00:00 neu startet

Ein Beispiel, das die Uhrzeit in zwei verschiedenen Formaten anzeigt

Ein Beispiel mit zwei verschiedenen Timern und nur einem Neustart

Ein Beispiel, das den Countdown-Timer startet, wenn eine Taste gedrückt wird

— robbmj
quelle

Du bist der Mann! Genau das habe ich gesucht. Danke dir! Noch etwas: Wie kann ich "0" vor Minuten hinzufügen, damit "04:59" anstelle von "4:59" angezeigt wird?

— Bartek

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

— Robbmj

@timbram es sah für mich zunächst auch komisch aus, bis mir klar wurde, dass ein Komma nach einer varDeklaration verschiedene Deklarationen trennt. so minutesund secondssind einfach deklarierte (aber nicht initialisierte) Variablen. Also timerist einfach gleich der durationParameter, nicht mehr und nicht weniger.

— Abustamam

@ SinanErdem Ich habe einen Code geschrieben, der dies tut. Ich kann diesen Code später heute zur Antwort hinzufügen. Ich werde Sie anpingen, wenn dies erledigt ist.

— Robbmj

Wie füge ich Reset-Optionen hinzu? Und auch eine Pause und Lebenslauf? Ich habe versucht, ein Feld this.reset hinzuzufügen und dies im Abschluss zu überprüfen. Aber die Uhr läuft weiter.

— Dzung Nguyen

Wenn Sie einen echten Timer möchten, müssen Sie das Datumsobjekt verwenden.

Berechnen Sie die Differenz.

Formatieren Sie Ihre Zeichenfolge.

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

Beispiel

Jsfiddle

nicht so präziser Timer

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
quelle

Mit setInterval können Sie ganz einfach eine Timer-Funktionalität erstellen. Nachfolgend finden Sie den Code, mit dem Sie den Timer erstellen können.

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!

Erweitern Sie das Snippet

— Durai
quelle

Repräsentiert nicht jede Sekunde genau, es zählt viel zu schnell herunter.

— Scott Rowley

Das Ändern der 500 auf 1000 scheint es genau zu machen.

— Scott Rowley

Eine gute Lösung, Stunde sollte jedoch auf Minute geändert werden, um Verwirrung zu vermeiden

— embulldogs99