倒计时是我们在很多场景下都需要用到的功能,比如网站上的秒杀倒计时、活动倒计时等等。而JavaScript是一种常用的实现倒计时的语言,本文将介绍JavaScript实现倒计时的代码及使用方法。
使用setInterval函数
使用setInterval函数是一种比较简单的实现倒计时的方法。代码如下:
javascript代码
function countdown(targetTime) {
var nowTime = new Date().getTime();
var distance = targetTime - nowTime;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 显示倒计时
document.getElementById("countdown").innerHTML =
days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
if (distance < 0) {
clearInterval(intervalId);
document.getElementById("countdown").innerHTML = "倒计时已结束";
}
}
// 设置目标时间
var targetTime = new Date("2023-05-01T00:00:00Z").getTime();
// 每秒钟更新一次倒计时
var intervalId = setInterval(function() {
countdown(targetTime);
}, 1000);
使用setTimeout函数
使用setTimeout函数也是一种实现倒计时的方法,代码如下:
javascript代码
function countdown(targetTime) {
var nowTime = new Date().getTime();
var distance = targetTime - nowTime;
var days = Math.floor(distance / (1000 * 60 * 60 * 24));
var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// 显示倒计时
document.getElementById("countdown").innerHTML =
days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒 ";
if (distance > 0) {
setTimeout(function() {
countdown(targetTime);
}, 1000);
} else {
document.getElementById("countdown").innerHTML = "倒计时已结束";
}
}