时间戳

首页 > 解决方案 > 带有顺序事件的 HTML 倒数计时器

html - 带有顺序事件的 HTML 倒数计时器

问题描述

在 HTML 中，我有一个倒数计时器，由 w3 提供，但我似乎无法弄清楚，一旦时间到期，如何在下一个日期重新加载计时器。例如，我想在假期之间倒计时。我假设我需要与今天的日期进行比较，但也不确定该模块的外观。任何帮助，将不胜感激。谢谢

var countDownDate = new Date("2021 年 1 月 1 日 01:37:25").getTime();

var countDownDate = new Date("2021 年 2 月 14 日 01:37:25").getTime();

var countDownDate = new Date("2021 年 3 月 17 日 15:37:25").getTime();

<!-- Display the countdown timer in an element -->
<p id="demo"></p>

<script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2021 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

 // Get today's date and time
 var now = new Date().getTime();

  // Find the distance between now and the count down date
  var distance = countDownDate - now;

  // Time calculations for days, hours, minutes and seconds
  var days = Math.floor(distance / (1000 * 60 * 60 * 24));
  var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 *     60));
  var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var seconds = Math.floor((distance % (1000 * 60)) / 1000);

  // Display the result in the element with id="demo"
  document.getElementById("demo").innerHTML = days + "d " + hours + "h "
  + minutes + "m " + seconds + "s ";

  // If the count down is finished, write some text 
  if (distance < 0) {
   clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
}, 1000);
</script>

标签： html

解决方案

这应该为您解决问题：

const dates = [
  new Date("Jan 1, 2021 01:37:25").getTime(),
  new Date("Feb 14, 2021 01:37:25").getTime(),
  new Date("Mar 17, 2021 15:37:25").getTime(),
];

const interval = setInterval(tick, 1000);

function nextDate() {
  const now = Date.now();
  return dates.find(date => date > now);
}

function tick() {
  const date = nextDate();
  if (!date) {
    clearInterval(interval);
    document.getElementById("demo").innerHTML = "EXPIRED";
  }
  let distance = date - Date.now();
  
  const days = Math.floor(distance / (1000 * 60 * 60 * 24));
  distance -= days * 1000 * 60 * 60 * 24;
  
  const hours = Math.floor(distance / (1000 * 60 * 60));
  distance -= hours * 1000 * 60 * 60;
  
  const minutes = Math.floor(distance / (1000 * 60));
  distance -= minutes * 1000 * 60;
  
  const seconds = Math.floor(distance / 1000);
  
  document.getElementById("demo").innerHTML = `Time until ${new Date(date).toLocaleDateString()}: ${days} days, ${hours} hours, ${minutes} minutes, ${seconds} seconds`;
}

它仅在未来没有更多日期时清除间隔。您可以通过更改dates变量中的数组来更改日期。但请注意，您必须保持日期的升序排列。

推荐阅读