javascript - 如何每天重复倒数计时器并每天多次？

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>

感谢您的任何帮助或指导！

标签： javascript

Answer 1

You create d1, d2 once, when the script starts, for the current day. To make them repeat you have to recreate the dates whenever the day changes. To simplify that you could just move them into tick(). Then they will be recreated every second, most of the time the dates will be the same, but at midnight they'll change.

I'd write the whole thing as:

  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);