jquery倒计时代码是怎么写的

发布网友发布时间：2022-05-06 23:39

共2个回答

懂视网时间：2022-05-15 13:36

jQuery可以实现倒计时功能，本文主要和大家详细介绍了jquery实现倒计时小应用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

html

<p id="shop_rec">
 <ul class="cf">
 <li>
 <img src="image/goods.jpg" alt="小米 Note 顶配版" />
 <p>
 <h5>小米 Note 顶配版</h5>
 <p>全网通 香槟金 移动联通<br />双4G手机 双卡双待</p>
 <em>?2998<i>起</i></em>
 <span class="time" data-starttime="1445982375" data-endtime="1446350400"></span>
 </p>
 </li>
 <li>
 <img src="image/goods.jpg" alt="小米 Note 顶配版" />
 <p>
 <h5>小米 Note 顶配版</h5>
 <p>全网通 香槟金 移动联通<br />双4G手机 双卡双待</p>
 <em>?2998<i>起</i></em>
 <span class="time" data-starttime="1445912375" data-endtime="1436350400"></span>
 </p>
 </li>
 </ul>
</p>

jquery

总结

不是特别优秀，但是小的应用完全没有问题。

热心网友时间：2022-05-15 10:44

首先获取当前时间与目标时间的时间差，然后通过定时器更新这个时间差，就实现了倒计时效果。实现上述过程需要以下两个函数：
getTime() // 返回距1970年1月1日之间的毫秒数，这样将时间差（毫秒数）÷3600÷24即为天数，时分秒类似
setTimeout(code,millisec); // 在指定的毫秒数后调用函数
实例演示如下
创建Html元素
<div class="box">
<span>距离2015年国庆节还剩：</span><br>
<div class="content">
<input type="text" id="time_d">天<input type="text" id="time_h">时<input type="text" id="time_m">分<input type="text" id="time_s">秒
</div>
</div>
设置css样式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box>span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
input[type='text']{width:45px;height:35px;padding:5px 10px;margin:5px 0;border:1px solid #ff9966;}
编写jquery代码
$(function(){
show_time();
});

function show_time(){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date("2015/10/01 00:00:00").getTime(); //设定目标时间
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance/1000)
// 时分秒为单数时、前面加零
if(int_day < 10){
int_day = "0" + int_day;
}
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;
}
// 显示时间
$("#time_d").val(int_day);
$("#time_h").val(int_hour);
$("#time_m").val(int_minute);
$("#time_s").val(int_second);
// 设置定时器
setTimeout("show_time()",1000);
}