Мульти обратный отсчет - PullRequest
Новая
       73

Мульти обратный отсчет

0 голосов
/ 22 февраля 2020

У меня есть веб-страница, где я ввел код обратного отсчета, и он работает хорошо. Однако я могу назвать его только 1 раз с идентификатором в html. Второй или третий раз больше не работает. Как я могу всегда использовать это? Мне нужно это 3 или 4 раза на странице. Спасибо. Это код: 

  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("timer").innerHTML = hours +  " ore "  + minutes +  " min "   + seconds +  "  sec"; // watch for spelling
  }

1 Ответ

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

Вам необходимо инкапсулировать функциональность так, чтобы ее можно было вызывать много раз. Обычно полезно подумать над вопросом «Как программист, как бы я хотел это использовать?»

Обычно это одна функция, которая принимает некоторые параметры и что-то делает и / или возвращает что-то.

В качестве примера ... не было бы неплохо, если бы у нас была функция startMyTimer(...), которая принимает timerId, и элемент и устанавливает таймер, который будет обновлять этот элемент? У нас уже есть подпись: 

function startMyTimer(timerId, element) { ... }

И теперь вы можете построить все внутри этой функции. JS позволяет объявлять функции внутри функций, что помогает при инкапсуляции, поэтому при копировании из вашего кода это будет выглядеть так: 

function startMyTimer(timerId, element) {
  var count = getLocalStorage(timerId) || 1000;
  var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

  function timer() {
    count = setLocalStorage(timerId, 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;

    element.innerHTML = hours + " ore " + minutes + " min " + seconds + "  sec"; // watch for spelling
  }
}

Обратите внимание, что теперь count и counter являются частными для области действия startMyTimer, поэтому только внутри этой функции (и любой функции внутри этой, такой как function timer()) будут видны эти переменные.

Так что, если вы хотите сделать именно то, что вы сделали, вы бы использовали это функция как 

window.onload = function() {
  startMyTimer('count', document.getElementById("timer"));
};

Опять же, это всего лишь пример возможного решения - возможно, вы могли бы передать идентификатор элемента вместо элемента, или длительность таймера, и т. д. c., и лучший Решение - это то, которое наилучшим образом соответствует вашим потребностям.

...