javascript - 带有动态日期和标题的倒数计时器
问题描述
我发现了一个倒计时计时器,它有一系列事件即将发生,并且可以自动更新以显示下一个事件
我想做的是在其中添加一个字符串,这样我就可以更新事件的标题以及计时器
例如
比赛名称“倒计时”
我想到了两种方法可以解决这个问题,但缺乏如何实施的知识
将字符串添加到数组中,并根据显示的数组的哪一部分以某种方式调用它
制作一个包含不同标题的 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>
解决方案
一段时间后,我带着新鲜的大脑回到这个问题上,我已经解决了
我需要做的就是将 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"
}
}
}
推荐阅读
- php - 为什么 $line = fgets("data/$f_handle") 不起作用
- python - 使用 VS 代码时启用/禁用扩展
- maven - 在 Jenkins 管道中使用 build-helper-plugin 增加 Maven project.version
- android - Firebase:制作多语言通知
- node.js - Express 服务器:将现有文档克隆到另一个集合中
- vb.net - 如何获取字符串中的第一个数字和第二个数字?
- python - 如何检查 post_save 中的模型字段是否已更改?
- java - 如何为具有 Java Spring 安全性的用户授予权限
- node.js - 在 Azure SDK 中查询节点的可用位置
- ios - iOS 分发证书已被吊销。引起什么问题?