jquery如何实现倒计时效果

时间：2013.05.19 发布人：EILEEN0755
jquery如何实现倒计时效果

已解决问题

谷歌EILEEN0755用户在2013.05.19提交了关于“李国庆jquery如何实现倒计时效果”的提问，欢迎大家涌跃发表自己的观点。目前共有1个回答，最后更新于2025-03-03T08:33:25。希望大家能够帮助她。

详细问题描述及疑问：期待您的答案，我不知道说什么才好,除了谢谢 ！

希望以下的回答，能够帮助你。

第1个回答

用户名：hlopenjj  

首先获取当前时间与目职肥注面器呢标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：

getTime()//返回距1970年1月1日之间的毫去掉层快服而选秒数，这样将时间差（毫秒数）÷0÷24即为天数，时分秒类似
setTimeout(code,millisec);//在指蛋斗声婷促见训定的毫秒数后调用函数

实例演示如下

创建h**tml元素

<divclass="box">
<s来自pan>距离2015年国庆节还剩：</span><br>
<divclass="content">
<inputt问答ype="text"id="time_d">天<inputtype="text"id="time_h">时<inputtype="text"id="time_m">分<inputtype="text"id="time_s">秒
</div>
</div>

设置css样载取为通殖式

***.box{w任宣继承氧点idth:300px;padding:20px;margin:20px;border:4pxdashed#ccc;}
***.box>span{co况帝也lor:#999;font-style:italic;}
div.content{width:250px;margin:10px0;padding:20px;bord鱼尼四简药住发源题打er:2pxsolid#ff6666;}
input[type='text']{widt度答均磁木提耐聚修h:4**x;height:3设棉打甚杂条**x;padding:**x10px;margin:**x0;border:1pxs助异乎olid#ff996施长什6;}

编写jquery代码

$(function(){
show_time();
});

functionshow_time(){
vartime_start=newDate().getTime();//设定当前时间
vartime_end=newDat成又环星续没第胜苏书e("2015/10/0100:00:00").getTime();//设定目标时间
//计算时间差
vartime_distance=time_end-time_start;
//天
varint_day=Math.floor(time_distance/86400000)
time_distance-=i散承济措理烈器nt_day*86400000;
//时
varint_hour=Math.floor(time_distance/36号们完00000)
time_distance-=i又理nt_hour*0000;
//分
varint_mi**te=Math.floor(time_distance/60000)
time_distance-=int_mi**t载根供给条较e*60000;
//秒
varint_second=Math.floor(time_distance/1000)
//时分秒为单数时、前面加零
if(int_day<10){
int_day="0"+int_day;
}
if(int_hou章话谓r<10){
int_hour="0"+int_hour;
}
if(int_minute<10){
int_mi**te="0"+int_mi**te;
}
if(int_second<10){
int_second="0"+int_second;
}
//显示时间
$("#time_d").val(int_起day);
$("#time_h").val(int_hour);
$("#time_m").val(int_mi**te);
$("#time_s").val(int_second);
//设置定时器
setTimeout("show_time()",1000);
}

观察效果

某个时刻的截图

几秒后的截图