Compte à rebours d'arrêt Javascript

Question

J'ai un compte à rebours en js et je ne peux pas ajouter un truc que je voudrais.

Lorsque le comptage se termine, il ne s'arrête pas. Les nombres négatifs commencent et je voudrais qu'il s'arrête à 0 une fois le temps écoulé. Comment faire ?

  var counter = null;

  window.onload = function() {
    initCounter();
  };

  function initCounter() {
    // get count from localStorage, or set to initial value of 1000
    count = getLocalStorage('count') || 1000;
    counter = setInterval(timer, 1000); //1000 will  run it every 1 second
  }

  function setLocalStorage(key, val) {
    if (window.localStorage) {
      window.localStorage.setItem(key, val);
    }

    return val;
  }

  function getLocalStorage(key) {
    return window.localStorage ? window.localStorage.getItem(key) : '';
  }

  function timer() {
    count = setLocalStorage('count', count - 1);
    if (count == -1) {
      clearInterval(counter);
      return;
    }

    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    hours %= 60;

    document.getElementById("countdown").innerHTML = hours +  " ore "  + minutes +  " min "   + seconds +  "  sec";
  }

Answer 1

Changez ça :

if (count == -1) {
  clearInterval(counter);
  return;
}

A ceci :

if (count < 0) {
  clearInterval(counter);
  localStorage.removeItem('count');
  return;
}

Faites toujours en sorte que vos conditions soient aussi strictes que possible, ou bien vous allez avoir des problèmes . Vous ne vous souciez pas vraiment du fait que c'est égal à -1 . Vous vous souciez du fait que c'est en dessous 0 .

Dans votre code original, il s'arrête bien lorsque la page est chargée sans localStorage. Mais à la fin, vous définissez le localStorage à -1 . Lorsque vous rafraîchissez, vous le réglez sur -2 ( count - 1 ) et commencer le compteur en allant dans les négatifs. Votre condition n'est jamais vérifiée par rapport à cette -1 valeur qui a été stockée.

Answer 2

Le problème est que tu as mis count con -1 valeur dans LocalStorage .

count = setLocalStorage('count', count - 1);

Et après le rechargement de la page, vous avez continué à soustraire 1 de -1 et tu as -2 que votre état count == -1 ne pouvait pas attraper. La solution est de mettre la prochaine valeur de comptage dans LocalStorage après avoir vérifié si vous devez continuer votre minuterie ou non.

<script type="text/javascript">

  let count = 0;
  let counter = null;

  window.onload = function() {
    initCounter();
  };

  function initCounter() {
    // get count from localStorage, or set to initial value of 1000
    count = Number(getLocalStorage('count')) || 5;
    counter = setInterval(timer, 1000); //1000 will  run it every 1 second
  }

  function setLocalStorage(key, val) {
    if (window.localStorage) {
     window.localStorage.setItem(key, val);
    }

    return val;
  }

  function getLocalStorage(key) {
    return window.localStorage ? window.localStorage.getItem(key) : '';
  }

  function timer() {
    const nextCount = count - 1
    if (nextCount < 0) {
      clearInterval(counter);
      return;
    }
    count = setLocalStorage('count', nextCount);

    const seconds = count % 60;
    let minutes = Math.floor(count / 60);
    let hours = Math.floor(minutes / 60);
    minutes %= 60;
    hours %= 60;

    document.getElementById("timer").innerHTML = hours +  " ore "  + minutes +  " min "   + seconds +  "  sec";
  }
 </script>

<div id="timer"></div>

J'espère que cela vous aidera :)