下面是关于“最全面的JS倒计时代码”的完整攻略:
倒计时的实现原理是利用 JavaScript 中的定时器 setInterval(),根据设置的时间间隔,每隔一定时间执行一次函数,实现倒计时效果。具体操作如下:
// 设置时间
let countDownTime = new Date('2021/12/31 23:59:59').getTime();
let countDown = setInterval(() => {
// 获取当前时间
let now = new Date().getTime();
// 计算剩余时间
let distance = countDownTime - now;
// 计算剩余时间的各个部分
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 在页面上显示剩余时间
document.getElementById('countdown').innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒";
// 倒计时结束后清除计时器
if (distance < 0) {
clearInterval(countDown);
document.getElementById('countdown').innerHTML = "倒计时已结束";
}
}, 1000);
根据自己的需求设置倒计时,可以设置倒计时截止时间、倒计时结束后的提示等,示例代码如下:
let countDownTime = new Date('2022/01/01 00:00:00').getTime();
let countDown = setInterval(() => {
let now = new Date().getTime();
let distance = countDownTime - now;
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById('countdown').innerHTML = days + "天 " + hours + "小时 "
+ minutes + "分钟 " + seconds + "秒";
if (distance < 0) {
clearInterval(countDown);
document.getElementById('countdown').innerHTML = "Happy New Year!";
}
}, 1000);
以上是“最全面的JS倒计时代码”的完整攻略,希望对您有所帮助。
本文链接:http://task.lmcjl.com/news/9154.html