Le compte à rebours JavaScript le plus simple possible? [fermé]

240

Je voulais juste vous demander comment créer le compte à rebours le plus simple possible.

Il y aura une phrase sur le site disant:

"L'inscription se termine dans 05:00 minutes!"

Donc, ce que je veux faire, c'est créer un simple compte à rebours js qui passe de "05:00" à "00:00" puis se réinitialise à "05:00" une fois terminé.

Je passais par quelques réponses auparavant, mais elles semblent toutes trop intenses (objets Date, etc.) pour ce que je veux faire.

— Bartek
source

Et encore une fois, vous omettez le code HTML pertinent, bien qu'au moins vous ayez en quelque sorte expliqué le problème de complexité cette fois. Mais sérieusement, vous devez chercher à trouver une solution vous - même , puis venir nous poser des questions sur les problèmes que vous rencontrez.

— David dit de réintégrer Monica

Exemples de code avec des plaintes sur la façon dont ils sont trop compliqués? Quoi qu'il en soit, je pense que vous pourriez facilement setIntervalet le rendre basé sur .innerHTML, au lieu de la date.

— bjb568

Oui, les gens devraient chercher à trouver eux-mêmes la solution. Mais avec javaScript, il existe de nombreux exemples de tâches courantes. Je sais comment faire un compte à rebours, mais je préfère en trouver un sur le Web (comme un composant). Donc, grâce à cette question et à la réponse détaillée, j'ai trouvé ce que je cherchais. Logique de compte à rebours

— Carlos Rafael Ramirez

J'ai trouvé ces solutions plus simples: stackoverflow.com/questions/32141035/…

— nu everest

Regardez ceci: sitepoint.com/build-javascript-countdown-timer-no-dependencies

— Erich García

Réponses:

491

J'ai deux démos, une avec jQueryet une sans. Ni utiliser les fonctions de date et sont aussi simples que possible.

Démo avec vanilla 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>

Développer l'extrait

Démo avec 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);
});

Cependant, si vous voulez une minuterie plus précise qui n'est que légèrement plus compliquée:

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>

Développer l'extrait

Maintenant que nous avons créé quelques minuteries assez simples, nous pouvons commencer à penser à la réutilisation et à la séparation des préoccupations. Nous pouvons le faire en demandant "que devrait faire un compte à rebours?"

Un compte à rebours doit-il décompter? Oui
Un compte à rebours doit-il savoir s’afficher sur le DOM? Non
Un compte à rebours doit-il savoir qu'il doit redémarrer lorsqu'il atteint 0? Non
Un compte à rebours devrait-il permettre à un client d'accéder au temps restant? Oui

Donc, avec ces choses à l'esprit, permet d'écrire un meilleur (mais toujours très simple) 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
  };
};

Alors pourquoi cette implémentation est-elle meilleure que les autres? Voici quelques exemples de ce que vous pouvez en faire. Notez que tout sauf le premier exemple ne peut pas être réalisé par les startTimerfonctions.

Un exemple qui affiche l'heure au format XX: XX et redémarre après avoir atteint 00:00

Un exemple qui affiche l'heure dans deux formats différents

Un exemple qui a deux temporisateurs différents et un seul redémarre

Un exemple qui démarre le compte à rebours lorsqu'un bouton est enfoncé

— robbmj
source

Tu es l'homme! C'est exactement ce que je cherchais. Je vous remercie! Une dernière chose: comment ajouter "0" devant les minutes, pour afficher "04:59" au lieu de "4:59"?

— Bartek

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

— robbmj

@timbram, cela m'a semblé bizarre au début aussi, jusqu'à ce que je réalise qu'une virgule après une vardéclaration sépare les différentes déclarations. donc minuteset secondssont simplement des variables déclarées (mais non initialisées). timerest donc tout simplement égal au durationparamètre, rien de plus, rien de moins.

— abustamam

@SinanErdem J'ai écrit du code qui fait ça. Je peux ajouter ce code à la réponse plus tard dans la journée. Je vous cinglerai quand cela sera fait.

— robbmj

Comment ajoutez-vous des options de réinitialisation? Et aussi une pause et reprendre? J'ai essayé d'ajouter un champ this.reset, et de vérifier cela dans la fermeture. Mais l'horloge continue de tourner.

— Dzung Nguyen

Si vous voulez une vraie minuterie, vous devez utiliser l'objet date.

Calculez la différence.

Formatez votre chaîne.

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

Exemple

Jsfiddle

minuterie pas si précise

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
source

Vous pouvez facilement créer une fonctionnalité de minuterie en utilisant setInterval.Below est le code que vous pouvez utiliser pour créer la minuterie.

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!

Développer l'extrait

— Durai
source

Ne représente pas exactement chaque seconde, c'est un compte à rebours beaucoup trop rapide.

— Scott Rowley

Changer le 500 en 1000 semble le rendre précis.

— Scott Rowley

Solution

— lisse