Как остановить выполнение таймера обратного отсчета после того, как он достиг крайнего срока на refre sh в моем браузере - PullRequest
0 голосов
/ 26 мая 2020

Так выглядит JavaScript. Я пробовал искать решения, но не нашел. Пожалуйста, мне нужны подробные решения. В сети я продолжал видеть файлы cookie, но не знаю, как их использовать в этом случае.

  function countDown() {
      var now = new Date();
      var eventDate = new Date(2020, 5, 22);

      var currentTime = now.getTime();
      var eventTime = eventDate.getTime();

      var remTime = eventTime - currentTime;

      var s = Math.floor(remTime / 1000);
      var m = Math.floor(s/60);
      var h = Math.floor(m/60);
      var d = Math.floor(h/24);

      h %= 24;
      m %= 60;
      s %= 60;

      h = (h < 10) ? "0" + h: h;
      m = (m < 10) ? "0" + m: m;
      s = (s < 10) ? "0" + s: s;

      document.getElementById("days").textContent = d;
      document.getElementById("days").innerText = d;

      document.getElementById("hours").textContent = h;
      document.getElementById("minutes").textContent = m;
      document.getElementById("seconds").textContent = s;

      var t = setTimeout(countDown, 1000);

      if (d == 0 && h == 0 && m == 0 && s == 0) {
        clearTimeout(t);
        document.getElementById("demo").innerHTML = "Happy Birthday!"
      }
  }
  countDown();
</script>

1 Ответ

0 голосов
/ 27 мая 2020

Проблема с вашим кодом заключается в логике проверки даты c.

Проверка с помощью == даст вам правдивый ответ, только если datetime (или его часть) совпадает со значением вы проверяете это по.

Однако вам нужно проверить, прошла ли дата уже. Для этого вам нужно использовать оператор < или <=.

Вот пример того, что я имею в виду. Вместо этого информация console.log ed, вы можете повторно реализовать редактирование DOM, которое у вас есть в вашем вопросе.

  function countDown() {
      var now = new Date();
      var eventDate = new Date(2020, 4, 22); // 22 May 2020

      var currentTime = now.getTime();
      var eventTime = eventDate.getTime();

      var remTime = eventTime - currentTime;

      var s = Math.floor(remTime / 1000);
      var m = Math.floor(s/60);
      var h = Math.floor(m/60);
      var d = Math.floor(h/24);

      h %= 24;
      m %= 60;
      s %= 60;

      h = (h < 10) ? "0" + h: h;
      m = (m < 10) ? "0" + m: m;
      s = (s < 10) ? "0" + s: s;

      var t = setTimeout(countDown, 1000);

      // This if statement only runs exactly on eventDate
      if (d == 0 && h == 0 && m == 0 && s == 0) {
        document.getElementById("demo").innerHTML = "Happy Birthday!"
      }
      
      // This if statement will run if we're past or exactly on eventDate
      if (remTime <= 0) {
        clearTimeout(t);
      }
      
      // This console.log shows that the numbers become negative after the date
      console.log(remTime, d,h,m,s);
  }
  countDown();
...