javascript实现倒计时（精确到秒）

前端技术 2023/09/09 JavaScript

代码相当简单实用，这里就不多废话了，小伙伴们简单看下就能明白

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
</head>
<body>
<div id=\"demo01\" class=\"colockbox\">剩余
<i class=\"day\">0</i>天
<i class=\"hour\">0</i>时
<i class=\"minute\">0</i>分
<i class=\"second\">0</i>秒
<input id=\"end_time_gou\" type=\"hidden\" value=\"2015/08/20 13:00:00\">
<input id=\"now_gou\" type=\"hidden\" value=\"2015/06/25 11:44:08\">
</div>

<div id=\"timer\" class=\"colockbox\">
</div>
<script type=\"text/javascript\" src=\"http://code.jquery.com/jquery-1.9.0.min.js\"></script>
<script>
var time_end = $(\'#end_time_gou\').val();
var time_now_server = $(\'#now_gou\').val();
countDown(time_end,time_now_server,\"#demo01 .day\",\"#demo01 .hour\",\"#demo01 .minute\",\"#demo01 .second\");
function countDown(endtime,now,day_elem,hour_elem,minute_elem,second_elem){
var end_time = new Date(endtime).getTime(),//月份是实际月份-1
current_time = new Date(now).getTime(),
sys_second = (end_time-current_time)/1000;
var timer = setInterval(function(){
if (sys_second > 0) {
sys_second -= 1;
var day = Math.floor((sys_second / 3600) / 24);
var hour = Math.floor((sys_second / 3600) % 24);
var minute = Math.floor((sys_second / 60) % 60);
var second = Math.floor(sys_second % 60);
day_elem && $(day_elem).text(day);//计算天
$(hour_elem).text(hour<10?\"0\"+hour:hour);//计算小时
$(minute_elem).text(minute<10?\"0\"+minute:minute);//计算分
$(second_elem).text(second<10?\"0\"+second:second);// 计算秒
} else {
clearInterval(timer);
}
}, 1000);
}
</script>
<script type=\"text/javascript\">
var time_now_server,time_now_client,time_end,time_server_client,timerID;
time_end=new Date($(\'#end_time_gou\').val());//结束的时间
time_end=time_end.getTime();
time_now_server=new Date($(\'#now_gou\').val());//开始的时间,服务器
time_now_server= time_now_server.getTime();
time_now_client=new Date();
time_now_client=time_now_client.getTime();//本地的时间
time_server_client=time_now_server-time_now_client;
setTimeout(\"show_time(\"+time_end+\",\"+time_server_client+\",\"+timerID+\")\",1000);
function show_time(time_end,time_server_client,timerID){
var timer = document.getElementById(\'timer\');
if(!timer){return;}
timer.innerHTML = timer.innerHTML;
var time_now,time_distance,str_time;
var int_day,int_hour,int_minute,int_second;
var time_now=new Date();
time_now=time_now.getTime()+time_server_client;
time_distance=time_end-time_now;
if(time_distance>0){
int_day=Math.floor(time_distance/86400000)
time_distance-=int_day*86400000;
int_hour=Math.floor(time_distance/3600000)
time_distance-=int_hour*3600000;
int_minute=Math.floor(time_distance/60000)
time_distance-=int_minute*60000;
int_second=Math.floor(time_distance/1000)
if(int_hour<10)
int_hour=\"0\"+int_hour;
if(int_minute<10)
int_minute=\"0\"+int_minute;
if(int_second<10)
int_second=\"0\"+int_second;
str_time=int_day+\"天\"+int_hour+\"小时\"+int_minute+\"分钟\"+int_second+\"秒\";
timer.innerHTML=str_time;
setTimeout(\"show_time(\"+time_end+\",\"+time_server_client+\",\"+timerID+\")\",1000);
}else{
timer.innerHTML =timer.innerHTML;
clearTimeout(timerID)
}
}

</script>
</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

本文地址：https://www.stayed.cn/item/23535

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案