带有动态日期和标题的倒计时计时器

Question

我发现了一个倒计时计时器，它会出现一系列事件，并且可以自动更新显示下一个事件

我想做的是在其中添加一个字符串，这样我就可以更新事件的标题以及计时器

例如

种族头衔"；倒计时定时器"；

我想了两种方法可以做到这一点，但缺乏如何实现的知识

1. 将字符串添加到数组中，并根据数组中显示的部分以某种方式调用它

2. 制作一个包含不同标题的switch语句，并根据数组编号使用调用它

如果有人能帮忙，将不胜感激

Javascript和HTML:

const schedule = [
['Feb 25 2021', 'Feb 9 2021', "race 1"],
['Feb 9 2021', 'Apr 20 2021', "race 2"],
['Apr 20 2022', 'Jul 25 2023', "race 3"]
];

function getTimeRemaining(endtime) {
const total = Date.parse(endtime) - Date.parse(new Date());
const seconds = Math.floor((total / 1000) % 60);
const minutes = Math.floor((total / 1000 / 60) % 60);
const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
const days = Math.floor(total / (1000 * 60 * 60 * 24));
return {
total,
days,
hours,
minutes,
seconds
};
}
function initializeClock(id, endtime) {
const clock = document.getElementById(id);
const daysSpan = clock.querySelector('.days');
const hoursSpan = clock.querySelector('.hours');
const minutesSpan = clock.querySelector('.minutes');
const secondsSpan = clock.querySelector('.seconds');
function updateClock() {
const t = getTimeRemaining(endtime);
daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
if (t.total <= 0) {
clearInterval(timeinterval);
}
}
updateClock();
const timeinterval = setInterval(updateClock, 1000);
}
// iterate over each element in the schedule
for (var i=0; i<schedule.length; i++) {
var startDate = schedule[i][0];
var endDate = schedule[i][1];
// put dates in milliseconds for easy comparisons
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);
var currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if (endMs > currentMs && currentMs >= startMs ) {
initializeClock('clockdiv', endDate);
}
}
schedule.forEach(([startDate, endDate]) => {
// put dates in milliseconds for easy comparisons
const startMs = Date.parse(startDate);
const endMs = Date.parse(endDate);
const currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if (endMs > currentMs && currentMs >= startMs ) {
initializeClock('clockdiv', endDate);
}
});
var race = i;
switch (race) {
case 1:
race = "race 1"
break;
case 2:
race = "race 2"
break;
case 3:
race = "race 3"
break;
default:
race = "end of season"
}
document.querySelector('.nextRace').innerHTML = race;

<div>
Next Race<br>
<span class="nextRace"></span>
</div>
<div id="clockdiv">
<span class="race title"></span> Days: <span class="days"></span><br> Hours: <span class="hours"></span><br> Minutes: <span class="minutes"></span><br> Seconds: <span class="seconds"></span>
</div>

Answer 1

过了一段时间，带着全新的头脑回到这个问题上，我已经解决了

我所需要做的就是将switch语句放在循环变量i的语句部分，这样变量就可以在正确的循环中拾取，而不是的日期数组数量

// iterate over each element in the schedule
for (var i = 0; i < schedule.length; i++) {
var startDate = schedule[i][0];
var endDate = schedule[i][1];
// put dates in milliseconds for easy comparisons
var startMs = Date.parse(startDate);
var endMs = Date.parse(endDate);
var currentMs = Date.parse(new Date());
// if current date is between start and end dates, display clock
if (endMs > currentMs && currentMs >= startMs) {
initializeClock('clockdiv', endDate);
var race = i;
switch (race) {
case 0:
track = "race 1"
break;
case 1:
track = "race 2"
break;
case 2:
track = "race 3"
break;

default:
track = "end of season"
}
}
}