@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)) но при перезагрузке страницы она же пропадет?..
  • Вопрос задан
  • 85 просмотров
Решения вопроса 1
sergiks
@sergiks Куратор тега JavaScript
♬♬
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);
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы