本文分享一个基于JavaScript的精准倒计时函数，支持同时显示当前时间和计算距离指定时间的剩余秒数。代码利用闭包管理多个定时器以避免冲突，并详细处理了Date对象中月份、星期等数值区间的转换问题。通过计算时间差实现倒计时功能，代码结构清晰，适合初学者参考及二次开发为插件。
倒计时功能效果展示
首先展示一下倒计时功能的实际运行效果。
JavaScript倒计时代码实现
接下来提供具体的实现代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒计时函数</title>
<script>
var timer=(function(){
return function (json){
if(json.currentTime){
var now=new Date();
var year=now.getFullYear();//返回年份（4位数字）
var month=now.getMonth()+1;//返回月份（0-11，所以+1）
var day=now.getDate();//返回某天（1-31）
var h=now.getHours();//返回小时（0-23）
var m=now.getMinutes();//返回分钟（0-59）
var s=now.getSeconds();//返回秒数（0-59）
//补O
m=m<10?'0'+m:m;
s=s<10?'0'+s:s;
var weekday=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
document.getElementById(json.objId).innerHTML=year+'年'+month+'月'+day+'日'+weekday[now.getDay()]+' '+h+':'+m+':'+s;
setTimeout(function(){timer(json)},1000);
}else{
var endtime=new Date(json.endtime);//结束时间
var nowtime = new Date();//当前时间
var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //计算差的秒数
//一天24小时 一小时60分钟 一分钟60秒
d=parseInt(lefttime/3600/24);
h=parseInt((lefttime/3600)%24);
m=parseInt((lefttime/60)%60);
s=parseInt(lefttime%60);
document.getElementById(json.objId).innerHTML=d+"天"+h+"小时"+m+"分"+s+"秒";
if(lefttime>0){setTimeout(function(){timer(json)},1000);}
}
}
})()
window.onload=function(){
timer({
currentTime:true,
objId:'thisTime'
})
timer({
objId:'countDown',
endtime:"2016/9/1,18:00"
})
}
</script>
</head>
<body>
<b>当前时间:</b> <span id="thisTime"></span><br/><br/>
<b>距离2016/9/1 18:00还有:</b> <span id="countDown"></span>
</body>
</html> 关键实现细节与注意事项
在实现过程中需要注意以下几个关键点： 1. 该函数具备双重功能：一是显示当前系统时间，二是计算倒计时，具体行为取决于传入参数的不同。 2. 核心逻辑依赖于JavaScript中Date对象返回的数据，需特别注意月份、日期、小时和分钟等字段的数值区间特性（例如月份从0开始计数）。 3. 关于星期的处理，本文采用数组映射的方式进行转换。 4. 倒计时的核心原理是计算时间差，即通过结束时间减去当前时间的秒数，再进行相应的数学换算。 5. 代码中使用了闭包机制，旨在防止在页面中存在多个定时器时产生冲突。 6. 该段代码逻辑较为直观易懂，具备一定基础的开发者可尝试将其封装为通用插件，欢迎交流分享。
总结
以上内容即为本文的全部分享，希望能为读者的学习提供有益帮助，同时也期待大家的支持。