JavaScript精准倒计时与当前时间显示函数实现

作者:异步漫步时间:2026-10-30 09:51:42浏览:383

本文分享一个基于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. 该段代码逻辑较为直观易懂,具备一定基础的开发者可尝试将其封装为通用插件,欢迎交流分享。

总结

以上内容即为本文的全部分享,希望能为读者的学习提供有益帮助,同时也期待大家的支持。

作者最新文章