好资源导航 » 文章资讯 » jQuery实现倒计时功能 jQuery实现计时器功能

jQuery实现倒计时功能 jQuery实现计时器功能

2023-09-24 11:33:07 47

本文转载自jquery做一个小的倒计时效果

在实际运用中，经常会使用到倒计时的效果。以下代码利用jQuery实现了一个倒计时计时器。





jquery倒计时实现

.shop_listulli{
display:inline-block;
list-style:none;
width:300px;
}








小米手机Note顶配版
全网通香槟金移动联通
双4G手机双卡双待
￥2998起

小米手机Note顶配版

全网通香槟金移动联通
双4G手机双卡双待

￥2998起

$(function(){ //找到商品列表以及时间显示span varabj=$("#shop_list"), timeObj=abj.find('.time'); //获取开始时间 varstarttime=timeObj.data('starttime'); //定时器函数 functionactionDo(){ returnsetInterval(function(){ timeObj.each(function(index,el){ //surplusTime为活动剩余开始时间 vart=$(this), surplusTime=t.data('endtime')-starttime; //若活动剩余开始时间小于0，则说明活动已开始 if(surplusTime<=0){ t.html("活动已经开始"); }else{ //否则，活动未开始，将剩余的时间转换成年，月，日，时，分，秒的形式 varyear=surplusTime/(24*60*60*365), showYear=parseInt(year), month=(year-showYear)*12, showMonth=parseInt(month), day=(month-showMonth)*30, showDay=parseInt(day), hour=(day-showDay)*24, showHour=parseInt(hour), minute=(hour-showHour)*60, showMinute=parseInt(minute), seconds=(minute-showMinute)*60, showSeconds=parseInt(seconds); t.html(""); //设置输出到HTML的格式并输出到HTML if(showYear>0){ t.append(""+showYear+"年") }; if(showMonth>0){ t.append(""+showMonth+"月") }; if(showDay>0){ t.append(""+showDay+"天") }; if(showHour>=0){ t.append(""+showHour+"小时") }; if(showMinute>=0){ t.append(""+showMinute+"分钟") }; if(showSeconds>=0){ t.append(""+showSeconds+"秒") }; }; }); starttime++; },1000);//设定执行或延时时间 }; //执行它 actionDo(); });

更多关于倒计时的文章请查看专题：《倒计时功能》

更多JavaScript时钟特效点击查看：JavaScript时钟特效专题

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

返回顶部
514930285
czq8825@qq.com

jQuery实现倒计时功能 jQuery实现计时器功能

小米手机Note顶配版

小米手机Note顶配版

热门推荐

随机推荐