javascript - 每周一、周三和周五 2000 小时的 JavaScript 倒数计时器
问题描述
我正在尝试在 JavaScript 中为每个星期一、星期三和星期五的 2000 小时创建一个倒数计时器。倒计时工作到 2000 小时,但在那之后它不起作用,我也不知道如何切换周,即周五切换到下周一,因为有 3 天计数,一周正常有两天,我也没有想秀天。
我想将天转换为小时,我的用户界面就像 47h 59m 50s 这个。
如果有人能弄清楚如何创建这个倒计时,我将不胜感激。
const gameCountdown = setInterval(function() {
var gameDay;
var currentDateTime = new Date();
var currentDay = currentDateTime.getDay();
var currentTime = currentDateTime.getTime();
var gameTime = new Date(currentDateTime.getFullYear(), currentDateTime.getMonth(), currentDateTime.getDate(), 20, 0, 0); // current day 8pm
var gameDay = (currentDay % 2 === 0) ? currentDay + 1 : currentDay;
if ((currentDay === gameDay) && (gameTime.getHours() >= 20)) {
gameTime = currentDateTime.setDate(currentDateTime.getDate() + 2);
}
var countdownTime = gameTime.getTime();
var difference = parseInt((countdownTime - currentTime));
if (difference > 0) {
var hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
var mins = Math.floor((difference / (1000 * 60)) % 60);
var sec = Math.floor((difference / 1000) % 60);
document.querySelector('#hours').innerHTML = hours + 'h';
document.querySelector('#min').innerHTML = mins + 'm';
document.querySelector('#sec').innerHTML = sec + 's';
} else {
var hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
var mins = Math.floor((difference / (1000 * 60)) % 60);
var sec = Math.floor((difference / 1000) % 60);
document.querySelector('#hours').innerHTML = hours + 'h';
document.querySelector('#min').innerHTML = mins + 'm';
document.querySelector('#sec').innerHTML = sec + 's';
}
}, 1000);
<span id="hours"></span>
<span id="min"></span>
<span id="sec"></span>
解决方案
这对你有用吗?
const getGameTime = (currentTime) => {
let gameDate = new Date(currentTime)
let offset = 0;
if (gameDate.getHours() >= 20) {
offset += gameDay === 5 ? 3 : // Friday after 20:00
1; // any other day
}
gameDate.setDate(gameDate.getDate() + offset);
let gameDay = gameDate.getDay();
offset = 0;
if (gameDay === 0) offset += 1; // Sunday
else if (gameDay === 2 || gameDay === 4) offset += 1; // Tuesday or Thursday
else if (gameDay === 6) offset += 2; // Saturday
gameDate.setDate(gameDate.getDate() + offset);
gameDate.setHours(20, 0, 0);
return gameDate.getTime();
}
const gameCountdown = setInterval(function() {
var gameDay;
var currentDateTime = new Date();
var currentDay = currentDateTime.getDay();
var currentTime = currentDateTime.getTime();
var countdownTime = getGameTime(currentTime);
var difference = parseInt((countdownTime - currentTime));
var hours = Math.floor((difference / (1000 * 60 * 60)));
var mins = Math.floor((difference / (1000 * 60)) % 60);
var sec = Math.floor((difference / 1000) % 60);
document.querySelector('#hours').innerHTML = hours + 'h';
document.querySelector('#min').innerHTML = mins + 'm';
document.querySelector('#sec').innerHTML = sec + 's';
}, 1000);
<span id="hours"></span>
<span id="min"></span>
<span id="sec"></span>
推荐阅读
- django-rest-framework - 如何覆盖 Django allauth 来自定义注册?
- android - 如何通过 webview 当前 url 设置按钮可见性
- python - 如何使正则表达式匹配表达式的确切次数,而不是确切的次数或更少
- java - 跨多个内核的同一进程的多个线程
- python-3.x - 在异步python中运行sqlite插入操作
- laravel - 发送电子邮件时 Laravel htmlspecialchars() 错误
- typescript - 打字稿中的关键字构造函数?
- python - 未找到关键字参数“{'pk': ''}' 的“ques_detail”的反向操作。尝试了 1 种模式:['ques_detail/(?P
[0-9]+)/$'] - c# - 在 Angular ASP.NET Core 2.0 应用程序中使用 LinkedIn api 和 Oauth 2.0 进行身份验证
- listview - 如何将列表视图添加到列中,然后将剩余空间(如果有)与列表上方的 1/3 和列表下方的 2/3 分开