JavaScript 实现天数时分秒倒计时功能详解
本文详细解析了如何使用 JavaScript 实现一个包含天、时、分、秒的倒计时功能。通过计算目标时间与当前时间的毫秒差,利用 parseInt 解析并转换为对应的时间单位,结合 setInterval 实现动态刷新。文章提供了基础示例及支持用户自定义时间的完整代码,适用于活动页面、注册验证码等场景。
JavaScript 倒计时功能概述
本文详细介绍如何使用 JavaScript 实现一个精确到秒的倒计时功能,包含天、时、分、秒四个维度的显示,供开发者参考与使用。
在编写代码前,需要了解 函数的基本用法。该函数用于解析字符串并返回整数。其语法格式为 ,其中 string 为待解析的字符串,radix 为可选的进制数。

以下是 parseInt 函数的几个典型应用示例:
parseInt("10"); //返回 10
parseInt("19",10); //返回 19 (10+9)
parseInt("11",2); //返回 3 (2+1)
parseInt("17",8); //返回 15 (8+7)
parseInt("1f",16); //返回 31 (16+15)
parseInt("010"); //未定:返回 10 或 8
基础倒计时代码实现
接下来展示具体的倒计时代码实现。
首先定义 HTML 结构,用于显示倒计时结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" >
<title>JS实现倒计时(天数,时,分,秒)</title>
</head>
<body onload="leftTimer()">
<h2>剩余时间:</h2>
<div id="timer"></div>
</body>
</html>
随后编写 JavaScript 逻辑,核心在于计算剩余时间并格式化输出。
<script language="javascript" type="text/javascript">
function leftTimer(year,month,day,hour,minute,second){
var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
setInterval("leftTimer(2016,11,11,11,11,11)",1000);
document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
}
function checkTime(i){ //将0-9的数字前面加上0,例1变为01
if(i<10)
{
i = "0" + i;
}
return i;
}
</script>
运行上述代码后,页面将动态显示剩余的天、时、分、秒数。

支持自定义时间的完整示例
为了提升实用性,在原有示例基础上补充了一段更完整的代码,支持用户通过输入框自定义倒计时时间,直接复制即可使用。
<html>
<body>
<input type="text" value="" id="date2">
<input type="button" onclick="go(document.getElementById('date2').value);" value="开始">
<div id="timer"></div>
<script type="text/javascript">
// 倒计时
var _ordertimer = null;
var data=new Date();
document.getElementById("date2").value=data.getFullYear()+'-'+(data.getMonth()+1)+'-'+data.getDate()+' '+data.getHours()+':'+data.getMinutes()+':'+data.getSeconds();//当前时间
function leftTimer(enddate) {
var leftTime = (new Date(enddate)) - new Date(); //计算剩余的毫秒数
var days = parseInt(leftTime / 1000 / 60 / 60 / 24, 10); //计算剩余的天数
var hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); //计算剩余的小时
var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
days = checkTime(days);
hours = checkTime(hours);
minutes = checkTime(minutes);
seconds = checkTime(seconds);
if (days >= 0 || hours >= 0 || minutes >= 0 || seconds >= 0) document.getElementById("timer").innerHTML = days + "天" + hours + "小时" + minutes + "分" + seconds + "秒";
if (days <= 0 && hours <= 0 && minutes <= 0 && seconds <= 0) {
window.clearInterval(_ordertimer);
_ordertimer = null;
}
}
function checkTime(i) { //将0-9的数字前面加上0,例1变为01
if (i < 10) {
i = "0" + i;
}
return i;
}
function go(v){
var date1=new Date(),data2=new Date(v);
if(data2<date1)return;//设置的时间小于现在时间退出
_ordertimer = setInterval(function(){leftTimer(data2)}, 1000);
}
</script>
</body>
</html>
该自定义版本的运行效果如下所示。

此外,还推荐以下相关技术文章供进一步阅读:
《基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果》
《JS实现根据用户输入分钟进行倒计时功能》
《JS实现用户注册时获取短信验证码和倒计时功能》
《基于JS实现发送短信验证码后的倒计时功能(无视页面刷新,页面关闭不进行倒计时功能)》
如需查看更多相关资源,可查看专题:《倒计时功能》。
希望以上内容能对您的学习有所帮助,欢迎继续支持本站获取更多技术分享。
JS语法错误会阻止加载吗?区分SyntaxError与资源加载失败
2026-11-05 16:08:46
JavaScript常见SyntaxError语法错误排查与修复方法
2026-11-05 13:58:44
JS中slice、substring和substr截取字符串的区别
2026-11-05 13:43:47
JS 转 TS 手动迁移最佳实践:从配置 tsconfig 到消除 any 类型
2026-11-05 11:53:32
为什么JS数组push后得到的是数字而不是数组?
2026-11-05 09:59:18
