Question

我正在尝试为下一艘即将离任的飞船创建一个倒数计时器。该船每天要离开多次，我想让计数器倒数到下一个离开时间。当上次的时间倒数到0时，应从第二天的第一时间重新开始。

每天有6次。

这是我到目前为止的内容，但似乎并没有重复。

(function () {
	var d1 = new Date;
	d1.setHours(6, 20, 0);
	var d2 = new Date;
	d2.setHours(9, 45, 0);
	var d3 = new Date;
	d3.setHours(11, 30, 0);
	var d4 = new Date;
	d4.setHours(15, 0, 0);
	var d5 = new Date;
	d5.setHours(15, 30, 0);
	var d6 = new Date;
	d6.setHours(20, 15, 0);


	function pad(num) {
		return ("0" + parseInt(num)).substr(-2);
	}

	function tick() {
		var now = new Date;
		if (now > d6 || now < 0 && now < d1) {
			var remain = ((d1 - now) / 1000);
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
			document.getElementById('time').style.color = "Red";
			setTimeout(tick, 1000);
		} else if (now > d1 && now < d2) {
			var remain = ((d2 - now) / 1000);
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
			document.getElementById('time').style.color = "Green";
			setTimeout(tick, 1000);
		} else if (now > d2 && now < d3) {
			var remain = ((d3 - now) / 1000);
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
			document.getElementById('time').style.color = "Red";
			setTimeout(tick, 1000);
		} else if (now > d3 && now < d4) {
			var remain = ((d4 - now) / 1000);
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
			document.getElementById('time').style.color = "Green";
			setTimeout(tick, 1000);
		} else if (now > d4 && now < d5) {
			var remain = ((d5 - now) / 1000);
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
			document.getElementById('time').style.color = "Red";
			setTimeout(tick, 1000);
		} else if (now > d5 && now < d6) {
			var remain = ((d6 - now) / 1000);
			var hh = pad((remain / 60 / 60) % 60);
			var mm = pad((remain / 60) % 60);
			var ss = pad(remain % 60);
			document.getElementById('time').innerHTML = hh + ":" + mm + ":" + ss;
			document.getElementById('time').style.color = "Red";
			setTimeout(tick, 1000);
		}
	}
	document.addEventListener('DOMContentLoaded', tick);
})();

<p>Next outgoing ship:&nbsp;<span id="time">&nbsp;</span></p>

感谢您的帮助或指导！

Answer 1

当脚本启动时，您将为当天创建一次d1，d2。要使它们重复出现，您必须在日期改变时重新创建日期。为简化起见，您可以将它们移至tick()中。然后它们将每秒重新创建一次，大多数情况下，日期是相同的，但是在午夜时分，它们会改变。

我将整个内容写为：

  const times = [
    [6, 20, "green"], [9, 45, "red"], [11, 30, "green"], [15, 0, "red"], [15, 30, "green"], [20, 15, "red"]
  ]

  const timer = document.getElementById('time');


  setInterval(function tick() {
     const now = new Date();
     const nextShip = times.find(it => it[0] > now.getHours() || it[0] == now.getHours() &&  it[1] >= now.getMinutes()) || times[0];

    let hours = nextShip[0] - now.getHours();
    let minutes = nextShip[1] - now.getMinutes();

    if(minutes < 0) { minutes += 60; hours -= 1 }
    if(hours < 0) { hours += 24; }

    const seconds = 60 - now.getSeconds();

    timer.innerHTML = `${hours}:${minutes}:${seconds}`;
    timer.style.color = nextShip[2];

  }, 1000);

如何每天重复倒计时，每天重复多次？

1 个答案: