时间戳

首页 > 解决方案 > 无限循环倒数计时器 JavaScript/HTML

javascript - 无限循环倒数计时器 JavaScript/HTML

问题描述

我正在尝试在 JavaScript 中创建一个无限循环的倒数计时器。我能够让倒计时按预期运行，但是一旦它们达到 0/低于 0，就无法让它们正确重置。

抱歉，我应该指定，对于第一个计时器“mcReset”，当计时器达到 0 时，我需要将日期重置为从最初指定的日期起 7 天。

对于第二个计时器“onyReset”，当计时器达到 0 时，我需要将日期重置为从最初指定的日期开始的 5 天。

因此，例如 mcReset (Oct 14 9:28:00) 将变为 Oct 21 9:28:00 并且 onyReset (Oct 17, 2019 12:00:00) 将变为 Oct 22, 2019 12:00:00 并且倒计时将从中无限循环。

我对 JavaScript 不是很熟悉，所以感谢您的帮助:)

这是代码：

// Set the date we're counting down to
var mcReset = new Date("Oct 14, 2019 9:28:00").getTime();
var onyReset = new Date("Oct  17, 2019 12:00:00").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 = mcReset - now;
  var onyDistance = onyReset - now;
    
  // Time calculations for days, hours, minutes and seconds
  var mcDays = Math.floor(distance / (1000 * 60 * 60 * 24));
  var onyDays = Math.floor(onyDistance / (1000 * 60 * 60 * 24));
  var mcHours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var onyHours = Math.floor((onyDistance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  var mcMinutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
  var onyMinutes = Math.floor((onyDistance % (1000 * 60 * 60)) / (1000 * 60));
  var mcSeconds = Math.floor((distance % (1000 * 60)) / 1000);
  var onySeconds = Math.floor((onyDistance % (1000 * 60)) / 1000);
    
  // Output the result in an element with id="demo"
  document.getElementById("demo").innerHTML = mcDays + "d " + mcHours + "h "
  + mcMinutes + "m " + mcSeconds + "s ";
  document.getElementById("ony").innerHTML = onyDays + "d " + onyHours + "h "
  + onyMinutes + "m " + onySeconds + "s ";
    
  // If the count down is over, reset
  if (distance < 0) {
  	// do something here?
	// not sure what
  }
}, 1000);
p {
  text-align: center;
  font-size: 60px;
  margin-top: 0px;
}
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p id="demo"></p>
<p id="ony"></p>

</body>
</html>

标签： javascripthtml

解决方案

关键是确保每个倒计时在更新页面的间隔函数内都有正确的目标时间戳。如果倒计时日期已经过去，则添加倒计时间隔；这样剩余时间将无缝跳转到倒计时到下一个时间戳。

这是执行此操作的一种方法：

const DAYS = 24 * 3600 * 1000;

const countdowns = [{
    id: "mcReset",
    timestamp: new Date("Oct 14, 2019 9:28:00").getTime(),
    interval: 7 * DAYS
  },
  {
    id: "onyReset",
    timestamp: new Date("Oct  17, 2019 12:00:00").getTime(),
    interval: 5 * DAYS
  },
  {
    id: "demo",
    timestamp: new Date(new Date().getTime() + 5000).getTime(),
    interval: 5000
  }
];

setInterval(() => {
  const now = new Date().getTime();
  countdowns.forEach(c => {
    while (c.timestamp < now) c.timestamp += c.interval; // set target to future date
    const tSecs = Math.floor((c.timestamp - now) / 1000);
    const secs = tSecs % 60;
    const tMins = (tSecs - secs) / 60;
    const mins = tMins % 60;
    const tHours = (tMins - mins) / 60;
    const hours = tHours % 24;
    const days = (tHours - hours) / 24;
    document.getElementById(c.id).textContent = `${days}d ${hours}h ${mins}m ${secs}s`;
  });
}, 1000);
p {
  text-align: center;
  font-size: 200%;
  margin-top: 0px;
}
<p id="mcReset"></p>
<p id="onyReset"></p>
<p id="demo"></p>

推荐阅读