JavaScript 创建倒计时定时器的程序
要理解这个示例,你应该具备以下 JavaScript 编程 主题的知识:
示例:创建倒计时定时器
// 程序创建倒计时定时器
// 倒计时开始时间(以毫秒为单位)
let countDownDate = new Date().getTime() + 24 * 60 * 60 * 1000;
// 倒计时定时器
let x = setInterval(function () {
// 获取当前日期和时间的毫秒数
let now = new Date().getTime();
// 计算现在与倒计时时间的时间间隔
let timeLeft = countDownDate - now;
// 对天数、小时数、分钟数和秒数进行时间计算
const days = Math.floor(timeLeft / (1000 * 60 * 60 * 24));
const hours = Math.floor((timeLeft / (1000 * 60 * 60)) % 24);
const minutes = Math.floor((timeLeft / 1000 / 60) % 60);
const seconds = Math.floor((timeLeft / 1000) % 60);
// 在具有id="demo"的元素中显示结果
console.log(
days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ",
);
// 倒计时完成后清除定时器
if (timeLeft < 0) {
clearInterval(x);
console.log("倒计时结束");
}
}, 2000);
输出
0天 23小时 59分钟 57秒
0天 23小时 59分钟 55秒
0天 23小时 59分钟 53秒
0天 23小时 59分钟 51秒
...
在上述程序中,使用 setInterval()
方法创建了一个定时器。
setInterval()
方法在给定的时间间隔内(此处为 2000 毫秒)执行。
new Date()
给出当前日期和时间。例如,
let d1 = new Date();
console.log(time); // 2020年8月28日 09:19:40 GMT+0545 (+0545)
getTime()
方法返回从 1970 年 1 月 1 日午夜(EcmaScript 纪元)到指定日期的毫秒数(此处为当前日期)。
以下代码给出了下一天的时间(以毫秒为单位)。
new Date().getTime() + 24 * 60 * 60 * 1000;
现在,我们可以使用以下公式计算剩余时间:
let timeLeft = countDownDate - now;
剩余天数的计算方法如下:
- 时间间隔除以 1000,以确定秒数,即
timeLeft / 1000
- 然后再除以 60 _ 60 _ 24,以确定剩余的天数。
- 使用
Math.floor()
函数将数字四舍五入到整数。
小时数、分钟数和秒数的计算方法类似。
注:你也可以通过传递特定日期来使用自定义的倒计时开始时间。
例如,
let countDownDate = new Date("2025年8月5日 14:22:36").getTime();