Сбросить таймер обратного отсчета js

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

Я получил этот код от Мэтта Смита на Codepen, и он работает очень хорошо (вы можете посмотреть https://m13m.webflow.io/), но, к сожалению, таймер становится отрицательным, и я хочу, чтобы он повторился.

Как я мог это сделать?

Большое спасибо!

 <script>
// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Mar 19, 2022 22:28:00').getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
          distance = countDown - now;

      document.getElementById('days').innerText = Math.floor(distance / (day)),
        document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
      
      //do something later when date is reached
      //if (distance < 0) {
      //  clearInterval(x);
      //  'IT'S MY BIRTHDAY!;
      //}

    }, second)
  
</script>

javascript

19.03.2022 21:47

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваш код выглядит хорошо. Вы должны проверить, меньше ли расстояние до 0, затем очистить таймер и распечатать текст BDay.

// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;

let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDown - now;
  if (distance < 0) {    
    document.getElementById('msg').innerHTML = "HAPPY BDAY"    
    clearInterval(x);
    return false;
  }
  document.getElementById('days').innerText = Math.floor(distance / (day));
  document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
  document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
  document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  
  

    }, second)

<div id = "days"></div>
<div id = "hours"></div>
<div id = "minutes"></div>
<div id = "seconds"></div>
<div id = "msg"></div>

Обновить (таймер запустится снова)

// Original Pen by Matt Smith 
const second = 1000,
      minute = second * 60,
      hour = minute * 60,
      day = hour * 24;
let round = 1;
const diff = 1; // set timediff in minutes
//let countDown = new Date('Mar 19, 2022 22:28:00').getTime();
let countDown = new Date(new Date().getTime() + diff*60000);
let x = setInterval(function() {
  let now = new Date().getTime();
  let distance = countDown - now;
  if (distance < 0) {    
    countDown = new Date(new Date().getTime() + diff*60000);
    document.getElementById('msg').innerHTML = "HAPPY BDAY" + ' Round => ' + (round++)
  }
  document.getElementById('days').innerText = Math.floor(distance / (day));
  document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour));
  document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute));
  document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
  
}, second)

<div id = "days"></div>
<div id = "hours"></div>
<div id = "minutes"></div>
<div id = "seconds"></div>
<div id = "msg"></div>

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

— 20.03.2022 12:13

@AlexandruConstantin Я обновил свой ответ! Теперь будет (повторить / начать снова) после завершения обратного отсчета. Таймер составляет 1 минуту, и вы можете установить таймер, если установите переменную diff в коде.

— 21.03.2022 10:09

@AlexandruConstantin Спасибо за отзыв! Пожалуйста. Если вы обнаружили, что мой ответ был полезен, было бы неплохо, если бы вы могли принять ответ. Если вы нашли, что это было хорошо, вы также можете проголосовать :-) Спасибо!

— 21.03.2022 20:23

Есть ли способ сбросить его каждые 3 часа, сохраняя обратный отсчет при обновлении страницы (например, если пользователь открывает страницу в 2:59:00 и обновляет ее до 2 минут, обратный отсчет должен показывать 2:57). :00)? Большое спасибо за помощь до сих пор!

— 31.03.2022 03:07

19.03.2022 22:01