本文转载自jquery做一个小的倒计时效果
在实际运用中,经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。
& lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> jquery倒计时实现& lt;/title>
& lt;风格类型=" text/css "比;
李.shop_list ul {
显示:inline-block;
list-style:没有;
宽度:300 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div类=" shop_list " id=皊hop_list”比;
& lt; ul>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/index/zixun1.jpg "/比;
& lt; div类="列"比;
& lt; h6>小米手机注意顶配版& lt;/h6>
& lt; p>全网通香槟金移动联通& lt; br/在4 g手双机双卡双待& lt;/p>
& lt; em>￥2998 & lt; i>起& lt;/i> & lt;/em>
& lt;跨类="时间" data-starttime=?445982375”data-endtime=?446350400”祝辞& lt;/span>
& lt;/div>
& lt;/li>
& lt; li>
& lt; img src=" https://www.yisu.com/zixun/img/index/zixun1.jpg "/比;
& lt; div类="列"比;
& lt; h6>小米手机注意顶配版& lt;/h6>
& lt; p>全网通香槟金移动联通& lt; br/在4 g手双机双卡双待& lt;/p>
& lt; em>￥2998 & lt; i>起& lt;/i> & lt;/em>
& lt;跨类="时间" data-starttime=' 1445982375 ' data-endtime=' 1446350400 '祝辞& lt;/span>
& lt;/div>
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/body>
& lt;脚本type=" text/javascript " src=" https://www.yisu.com/zixun/js/lib/jquery-1.10.1.min.js "祝辞& lt;/script>
& lt;脚本type=" text/javascript祝辞
$(函数(){//找到商品列表以及时间显示
var这个=$ (" # shop_list "),
timeObj=abj.find (“.time”);//获取开始时间
var开始时间=timeObj.data(“开始时间”);//定时器函数
函数actionDo () {
返回setInterval(函数(){
timeObj。每个(函数(指数(el) {//surplusTime为活动剩余开始时间
var t=$ (),
surplusTime=t.data (endtime)开始时间;//若活动剩余开始时间小于0,则说明活动已开始
如果(surplusTime & lt;=0) {
t.html(“活动已经开始”);
其他}{//否则,活动未开始,将剩余的时间转换成年,月,日,时,分,秒的形式
var=surplusTime/年(24 * 60 * 60 * 365),
showYear=方法(年),
月=(year-showYear) * 12,
showMonth=方法(月)=(month-showMonth) * 30天,
showDay=方法(一天),
小时=(day-showDay) * 24,
showHour=方法(小时)
60分钟=(hour-showHour) *,
showMinute=方法(分钟),
60秒=(minute-showMinute) *,
showSeconds=方法(秒);
t.html (" ");//设置输出到HTML的格式并输出到HTML
如果(showYear> 0) {
t.append (“& lt; span>“+ showYear +“年& lt;/span>”)
};
如果(showMonth> 0) {
t.append (“& lt; span>“+ showMonth +“月& lt;/span>”)
};
如果(showDay> 0) {
t.append (“& lt; span>“+ showDay +“天& lt;/span>”)
};
如果(showHour>=0) {
t.append (“& lt; span>“+ showHour +“小时& lt;/span>”)
};
如果(showMinute>=0) {
t.append (“& lt; span>“+ showMinute +”分钟& lt;/span>”)
};
如果(showSeconds>=0) {
t.append (“& lt; span>“+ showSeconds +“秒& lt;/span>”)
};
};
}）;
开始时间+ +;
},1000);//设定执行或延时时间
};//执行它
actionDo ();
}）;
& lt;/script>
& lt;/html>之前
更多关于倒计时的文章请查看专题:《倒计时功能》
更多的JavaScript时钟特效点击查看:JavaScript时钟特效专题
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
