Javascript остановка обратного отсчета - PullRequest
Новая
       10

Javascript остановка обратного отсчета

3 голосов
/ 23 февраля 2020

У меня есть обратный отсчет в js, и я не могу добавить нужный трюк.

Когда счет заканчивается, он не останавливается. Отрицательные числа начинаются, и вместо этого я хотел бы, чтобы это остановилось в 0, как только время истекло. Как я могу? 

  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";
  }

Ответы [ 2 ]

3 голосов
/ 23 февраля 2020

Измените это: 

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

На это: 

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

Всегда соблюдайте максимально строгие условия, или у вас будут проблемы . На самом деле вам все равно, что оно равно -1. Вы заботитесь, что она ниже 0.

В вашем исходном коде все нормально останавливается, когда страница загружается без localStorage. Но в конце вы устанавливаете localStorage на -1. Когда вы обновляете sh, вы устанавливаете его на -2 (count - 1) и запускаете счетчик, переходящий в отрицательные значения. Ваше состояние никогда не проверяется с тем значением -1, которое было сохранено.

1 голос
/ 23 февраля 2020

Проблема в том, что вы помещали count со значением -1 в LocalStorage. 

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

И после перезагрузки страницы вы продолжали вычитать 1 из -1 и получили -2, которое ваше состояние count == -1 не смог поймать. Решение состоит в том, чтобы поместить следующее значение счетчика в LocalStorage после того, как вы проверите, нужно ли вам продолжать таймер или нет. 

<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>

Надеюсь, это поможет:)

...