Как показать и запустить таймер по клику?

Question

[Mishcake]

Здравствуйте!

Подскажите, пожалуйста, как можно решить задачу: по клику на одну из трёх кнопок (#id1, #id2, #id3) необходимо показать и запустить таймер на 45 минут.

Показать, думаю, можно через display: none/block;

Но как запустить?

Вот начало кода моего таймера:

let currentDate = new Date();

let data = [
    {
        date: currentDate.setMinutes(currentDate.getMinutes() + 45)
    },
];

Там дальше мешанина из кода, который подтягивает значение из data и выводит цифры в таймер.

Сейчас такая запись каждый раз запускает при обновлении страницы таймер на 45 минут.

Мне нужно, чтобы таймер не обновлялся при перезагрузке, а уходил в ноль. И при клике на любую из кнопок подставлялось текущее значение времени в таймер.

Как это можно сделать?

Апдейт: я так понимаю, что в currentDate при клике нужно прокидывать фиксированную дату и время (типа let currentDate = new Date(2020, 06, 12)) но при перезагрузке страницы она же пропадет?..

Comments

[Smoke_qq]

Записывать значение Window.localStorage

[Maxim Kirshin]

Так закинь нужные тебе данные в localStorage, ну или cookie.

[WapSter]

Сохраняй значение в localStorage. А вообще почему бы тебе не сравнивать текущую дату с нужной тебе. Для удобства можно использовать momentjs, а вообще здесь этот вопрос не раз повторялся и в интернете куча примеров.
С первого раза нашел кучу результатов нужных для этого. Еще раз убеждаюсь, что умение пользоваться поиском - это талант или какой-то дар, хотя и не доумеваю почему все так же не умеют..

Answer 1

[Сергей Соколов]

1. Клик по кнопке определяет дату-время «сейчас», добавляет к ней 45 минут и сохраняет значение в localStorage.

const timerKey = 'myTimer';
function onButtonClick() {
  const D = new Date();
  D.setTime(45 * 6e4 + D.getTime()); // добавить 45 минут
  localStorage.setItem(timerKey, D.getTime()); // сохранить на случай обновления страницы
  startTimer(D.getTime()); // показывать обратный отсчёт
}

document.getElementById("id1").addEventListener("click", onButtonClick);

2. обратный отсчёт отображает разницу текущего времени и «времени Че»

function startTimer(ts) {
  function showTime() {
    const till = Math.max(0, che - Date.now()); // не меньше 0
    // далее вывод этого времени в нужном месте
    let seconds = Math.floor(till / 1000);
    const hours = Math.floor(seconds / 3600);
    seconds -= hours * 3600;
    // ...

    if (till > 0) setTimeout(showTime, 200);
  }

  const che = +ts; // чтобы число
  showTime();

3. при загрузке страницы смотреть, если ли что в localStorage и запускать таймер, если есть

const savedChe = +localStorage.getItem(timerKey);
if (savedChe) startTimer(savedChe);

Comments

[Mishcake]

Ух! Выглядит здорово! Завтра попробую интегрировать в свой таймер, отпишусь по результатам) Спасибо!

[Mishcake]

Хм, нашёл неприятный баг: если несколько раз нажать на кнопку #id1, то таймер начинает вести себя очень странно) Если нажать 3 раза с интервалом в пару секунд, то таймер начнёт меняться каждые пару секунд на новое значение. Можно ли как-то зафиксировать значение после клика, не давая его менять?

[Сергей Соколов]

Mishcake, частая практика – держать «состояние» системы в переменной. В этом примере «состояние» должно отражать, работает или нет таймер. Или даже удобнее сохранять сам таймер, его id, чтобы потом можно было его остановить. Завести глобальную (вообще глобальные лучше не делать, но пока сойдёт) переменную:

const timerKey = 'myTimer';
let timer; // <-- добавилась строка

Нужно уточнить бизнес-логику: что должно происходить при наличии таймера, если кликают на кнопку пуска?
Игнорировать - тогда в обработчике клика надо смотреть на состояние: если таймер уже есть - выходить:

function onButtonClick() {
  if (timer) return; // <-- добавилась строка

и при успешном создании таймера, записывать его в переменную:

// вместо:
if (till > 0) setTimeout(showTime, 200);

// сделать:
if (till > 0) {
  timer = setTimeout(showTime, 200);
} else {
  timer = undefined;
}

[Mishcake]

Сергей Соколов, я до вашего ответа написал такой костыль:

function onButtonClick() {
  if (localStorage.getItem("checkTimer") != "true") {
    localStorage.setItem("checkTimer", "true");
    const D = new Date();
    D.setTime(45 * 6e4 + D.getTime()); // добавить 45 минут
    localStorage.setItem(timerKey, D.getTime()); // сохранить на случай обновления страницы
    ... ... ...
} else {
  console.log("второй раз запустить нельзя");

Руководствовался такой логикой: при клике записывалось новое значение в D (хотя это была константа и что там под капотом ломалось, я хз). Поэтому я при первом клике записываю в checkTimer значение true и проверяю его при клике)

Пока работает :)))