Il conto alla rovescia JavaScript più semplice possibile? [chiuso]

240

Volevo solo chiedere come creare il conto alla rovescia più semplice possibile.

Ci sarà una frase sul sito che dice:

"La registrazione termina tra 05:00 minuti!"

Quindi, quello che voglio fare è creare un semplice conto alla rovescia js che va da "05:00" a "00:00" e quindi reimposta su "05:00" una volta terminato.

Avevo già esaminato alcune risposte, ma sembrano tutte troppo intense (oggetti data, ecc.) Per quello che voglio fare.

— Bartek
fonte

E di nuovo, stai tralasciando il codice HTML pertinente, anche se almeno questa volta hai spiegato il problema della complessità. Ma seriamente, devi cercare tu stesso una soluzione , e poi vieni a chiederci dei problemi che stai riscontrando.

— David dice di ripristinare Monica il

Esempi di codice con lamentele su come sono troppo complicati? Ad ogni modo, penso che potresti facilmente setIntervalfarlo e basato su .innerHTML, invece che in base alla data.

— bjb568,

Sì, le persone dovrebbero cercare di creare autonomamente la soluzione. Ma con javaScript ci sono molti esempi di attività comuni. So come fare un conto alla rovescia, ma preferisco trovarne uno nel web (come un componente). Quindi grazie a questa domanda e all'ampia risposta ho trovato quello che stavo cercando. Logica del conto alla rovescia

— Carlos Rafael Ramirez,

Ho trovato queste soluzioni più semplici: stackoverflow.com/questions/32141035/…

— nu everest

Guarda questo: sitepoint.com/build-javascript-countdown-timer-no-dependencies

— Erich García

Risposte:

491

Ho due demo, una con jQuerye una senza. Né utilizzare le funzioni di data e sono quasi semplici.

Demo con JavaScript vaniglia

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>

Espandi frammento

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

Tuttavia, se si desidera un timer più preciso che è solo leggermente più complicato:

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>

Espandi frammento

Ora che abbiamo creato alcuni timer piuttosto semplici, possiamo iniziare a pensare alla riutilizzabilità e alla separazione delle preoccupazioni. Possiamo farlo chiedendo "cosa dovrebbe fare un conto alla rovescia?"

Un timer per il conto alla rovescia deve eseguire il conto alla rovescia? sì
Un timer per il conto alla rovescia dovrebbe sapere come visualizzarsi sul DOM? No
Un timer per il conto alla rovescia dovrebbe sapere di riavviarsi quando raggiunge lo 0? No
Un timer per il conto alla rovescia dovrebbe consentire a un client di accedere a quanto tempo rimane? sì

Quindi, tenendo a mente queste cose, possiamo scrivere una migliore (ma comunque molto semplice) 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
  };
};

Quindi perché questa implementazione è migliore delle altre? Ecco alcuni esempi di cosa puoi farci. Si noti che tutte le startTimerfunzioni tranne il primo esempio non possono essere raggiunte .

Un esempio che visualizza l'ora nel formato XX: XX e si riavvia dopo aver raggiunto le 00:00

Un esempio che visualizza l'ora in due diversi formati

Un esempio che ha due timer diversi e solo uno si riavvia

Un esempio che avvia il conto alla rovescia quando si preme un pulsante

— robbmj
fonte

Tu sei l'uomo! Questo è esattamente quello che stavo cercando. Grazie! Ancora una cosa: come posso aggiungere "0" all'inizio dei minuti, quindi mostra "04:59", anziché "4:59"?

— Bartek,

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

— robbmj,

@timbram inizialmente mi è sembrato strano, fino a quando ho capito che una virgola dopo una vardichiarazione separa dichiarazioni diverse. così minutese secondssono semplicemente dichiarate (ma non inizializzate) variabili. quindi timerè semplicemente uguale al durationparametro, niente di più, niente di meno.

— abustamam,

@SinanErdem Ho scritto del codice per farlo. Posso aggiungere quel codice alla risposta più tardi oggi. Ti eseguirò il ping quando questo sarà fatto.

— robbmj,

Come si aggiungono le opzioni di ripristino? E anche una pausa e riprendere? Ho provato ad aggiungere un campo this.reset e controllare quello nella chiusura. Ma l'orologio continua però.

— Dzung Nguyen,

Se vuoi un vero timer devi usare l'oggetto data.

Calcola la differenza

Formatta la tua stringa.

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

Esempio

Jsfiddle

timer non così preciso

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
fonte

È possibile creare facilmente una funzionalità timer utilizzando setInterval.Below è il codice che è possibile utilizzare per creare il 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!

Espandi frammento

— Durai
fonte

Non rappresenta accuratamente ogni secondo, conta alla rovescia troppo velocemente.

— Scott Rowley,

Cambiare da 500 a 1000 sembra renderlo accurato.

— Scott Rowley,

Soluzione semplice, l'ora dovrebbe essere cambiata in minuto anche se per evitare confusione

— embulldogs99