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>

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

赞 (0)

相关推荐

  • Javascript 倒计时源代码.(时.分.秒) 详细注释版

    随便写写!闲着无聊!代码如有bug之处欢迎阁下强力拍砖! JS CODE 复制代码 代码如下: <script type="text/javascript" language="javascript"> //总时间,已分为单位 var time = 100; //小时 var h = parseInt(time / 60) > 0 ? parseInt(time / 60) : 0; //分 var m = time % 60; //秒 var s

  • JavaScript 逼真图片倒计时实现代码

    JavaScript 逼真图片倒计时实现代码

    逼真的Js图片倒计时,显示剩余小时.分钟.秒数.仅用了一张图片就搞定了,与纯网页版的不太一样哦.现在用图片模拟LED的效果,还真不错,希望大家彻底喜欢哦. 逼真图片倒计时 .time{width:200px;height:25px;border:1px red solid;overflow:hidden;} .time span{float:left;line-height:25px;height:25px;overflow:hidden;} .time span.danwei{padding:

  • javascript秒数倒计时自动跳转代码

    var secs =5; //倒计时的秒数 var URL ; function Load(url){ URL =url; for(var i=secs;i>=0;i--) { window.setTimeout('doUpdate(' + i + ')', (secs-i) * 1000); } } function doUpdate(num) { document.getElementById('ShowDiv').innerHTML = '将在'+num+'秒后自动跳转到 我们' ; if

  • javascript入门·动态的时钟,显示完整的一些方法,新年倒计时

    时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上的时间是正确的.还有个原因,他总按照GTM市区来计量.我们只是返回当前date对象的副本,我们即便是修改,那也不会对对象本身有任何影响. 演示一:动态的时钟(来个复杂的) 11:55:13 演示二:显示完整的一些方法(事实上我很讨厌有些格式了) Mon Oct 1 22:35:25 UTC+0800

  • javascript倒计时效果代码，可以方便参数调用

    我们-www.jb51.net 倒记时效果 "+daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒"; } else { document.getElementById(time_id[i]).innerHTML=daysold+"天"+hrsold+"小时"+minsold+"分"+seconds+"秒&

  • Javascript倒计时代码

    JS脚本: 复制代码 代码如下: <script language="javascript" type="text/javascript"> var interval = 1000; function ShowCountDown(year, month, day, divname) { var now = new Date(); var endDate = new Date(year, month - 1, day, 14, 07); var leftT

  • 同一页面多个商品倒计时JS 基于面向对象的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> <title></title

  • javascript倒计时效果实现

    javascript倒计时效果实现

    本文分析不同倒计时效果的计算思路及方法,掌握日期对象Date,获取时间的方法,计算时差的方法,实现不同的倒时计效果. 1.简单时间显示 讲解日期对象Date,并通过该对象获取时.分.秒等,让你自由提取所需时间内容. <!DOCTYPE html> <html> <head> <title>获取时间</title> <script type="text/javascript"> window.onload = fun

  • Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    Javascript实现商品秒杀倒计时（时间与服务器时间同步）

    现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时. 关于倒计时,有下面几点需要注意: 1.应该使用服务器时间而不是本地时间(本地时间存在时区不同.用户自行设置等问题). 2.要考虑网络传输的耗时. 3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要专门写时间生成脚本. 过程分析: 1.从服务器读到一个时间戳之后便开始计时,不考虑网络传输的耗时: 图中的各项标注分别是(上面的时间线采用标准时间,与服务器和页

  • Javascript倒计时页面跳转实例小结

    例1: 复制代码 代码如下: <script type="text/javascript" language="JavaScript"> var startTime = new Date();    var endTime=startTime.getTime()+10*60*1000;    var g_blinkswitch = 0;    var g_blinktitle = document.title;    function getRemain

  • JavaScript分秒倒计时器实现方法

    JavaScript分秒倒计时器实现方法

    本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供大家参考.具体分析如下: 一.基本目标 在JavaScript设计一个分秒倒计时器,一旦时间完成使按钮变成不可点击状态 具体效果如下图,为了说明问题,调成每50毫秒也就是每0.05跳一次表, 真正使用的时候,把window.onload=function(){...}中的setInterval("clock.move()",50);从50调成1000即可. 在时间用完之前,按钮还是可以点击的. 时间用完之后,按钮就不能

  • javascript倒计时功能实现代码

    代码如下: 复制代码 代码如下: /** * 倒计时 * * @author WadeYu * @date 2012-04-20 17:40 * @copyright boyaa.com */ var TimeCountDown = function( initTime ){ var day = 0; var hour = 0; var minute = 0; var second = 0; var timerId = 0; var self = this; var fixInitTime =

随机推荐