1 <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> 2 <script type="text/javascript"> 3 $.extend($.fn,{ 4 5 fnTimeCountDown:function(d){ 6 this.each(function(){ 7 var $this = $(this); 8 var o = { 9 hm: $this.find(".hm"), 10 sec: $this.find(".sec"), 11 mini: $this.find(".mini"), 12 hour: $this.find(".hour"), 13 day: $this.find(".day"), 14 month:$this.find(".month"), 15 year: $this.find(".year") 16 }; 17 var f = { 18 haomiao: function(n){ 19 if(n < 10)return "00" + n.toString(); 20 if(n < 100)return "0" + n.toString(); 21 return n.toString(); 22 }, 23 zero: function(n){ 24 var _n = parseInt(n, 10);//解析字符串,返回整数 25 if(_n > 0){ 26 if(_n <= 9){ 27 _n = "0" + _n 28 } 29 return String(_n); 30 }else{ 31 return "00"; 32 } 33 }, 34 dv: function(){ 35 //d = d || Date.UTC(2050, 0, 1); //如果未定义时间,则我们设定倒计时日期是2050年1月1日 36 var _d = $this.data("end") || d; 37 var now = new Date(), 38 endDate = new Date(_d); 39 //现在将来秒差值 40 //alert(future.getTimezoneOffset()); 41 var dur = (endDate - now.getTime()) / 1000 , mss = endDate - now.getTime() ,pms = { 42 hm:"000", 43 sec: "00", 44 mini: "00", 45 hour: "00", 46 day: "00", 47 month: "00", 48 year: "0" 49 }; 50 if(mss > 0){ 51 pms.hm = f.haomiao(mss % 1000); 52 pms.sec = f.zero(dur % 60); 53 pms.mini = Math.floor((dur / 60)) > 0? f.zero(Math.floor((dur / 60)) % 60) : "00"; 54 pms.hour = Math.floor((dur / 3600)) > 0? f.zero(Math.floor((dur / 3600)) % 24) : "00"; 55 pms.day = Math.floor((dur / 86400)) > 0? f.zero(Math.floor((dur / 86400)) % 30) : "00"; 56 //月份,以实际平均每月秒数计算 57 pms.month = Math.floor((dur / 2629744)) > 0? f.zero(Math.floor((dur / 2629744)) % 12) : "00"; 58 //年份,按按回归年365天5时48分46秒算 59 pms.year = Math.floor((dur / 31556926)) > 0? Math.floor((dur / 31556926)) : "0"; 60 }else{ 61 pms.year=pms.month=pms.day=pms.hour=pms.mini=pms.sec="00"; 62 pms.hm = "000"; 63 //alert('结束了'); 64 return; 65 } 66 return pms; 67 }, 68 ui: function(){ 69 if(o.hm){ 70 o.hm.html(f.dv().hm); 71 } 72 if(o.sec){ 73 o.sec.html(f.dv().sec); 74 } 75 if(o.mini){ 76 o.mini.html(f.dv().mini); 77 } 78 if(o.hour){ 79 o.hour.html(f.dv().hour); 80 } 81 if(o.day){ 82 o.day.html(f.dv().day); 83 } 84 if(o.month){ 85 o.month.html(f.dv().month); 86 } 87 if(o.year){ 88 o.year.html(f.dv().year); 89 } 90 setTimeout(f.ui, 1); 91 } 92 }; 93 f.ui(); 94 }); 95 } 96 }); 97 </script> 98 99 <div style="background:rgb(183,17,41); WIDTH: 100%; color:#fff;FONT-FAMILY: arial; TEXT-ALIGN: center;"> 100 <P style="font-size:.8em;line-height:2em;">距活动结束还有:</P> 101 <div id="fnTimeCountDown" data-end="2018/07/08 18:45:13"> 102 <span class="year">00</span>年 103 <span class="month">00</span>月 104 <span class="day">00</span>天 105 <span class="hour">00</span>时 106 <span class="mini">00</span>分 107 <span class="sec">00</span>秒 108 <span class="hm">000</span> 109 </div> 110 </div> 111 <script type="text/javascript"> 112 $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13"); 113 </script>
活动倒计时代码可以精确到毫秒已经使用jquery插件化,方便调用和同一个页面重复调用。插件调用代码: $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
活动倒计时代码可以精确到毫秒已经使用jquery插件化,方便调用和同一个页面重复调用。
html结构如:
html结构如:
<div id="fnTimeCountDown">
<span class="year">00</span>年
<span class="month">00</span>月
<span class="day">00</span>天
<span class="hour">00</span>时
<span class="mini">00</span>分
<span class="sec">00</span>秒
<span class="hm">000</span>
</div>
插件调用代码: $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
如果一个页面同时调用多个倒计时也很简单,比如相同地方有一个相同类名:fnTimeCountDown 我们就可以使用这个类名调用即可$(".fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
在扩展一下,你想给每一个倒计时设置不同的倒计时时间,这个也可以,很简单在要显示倒计时时间的标签上写上 data-end="2018/07/08 18:45:13" 而且这个优先级是比较高的。所以你可以不传日期,直接使用data-end="2018/07/08 18:45:13" 这种方式设定日期。
如:<div class="fnTimeCountDown" data-end="2018/07/08 18:45:13">......</div>
这样子。
插件调用代码: $("#fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
如果一个页面同时调用多个倒计时也很简单,比如相同地方有一个相同类名:fnTimeCountDown 我们就可以使用这个类名调用即可$(".fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
在扩展一下,你想给每一个倒计时设置不同的倒计时时间,这个也可以,很简单在要显示倒计时时间的标签上写上 data-end="2018/07/08 18:45:13" 而且这个优先级是比较高的。所以你可以不传日期,直接使用data-end="2018/07/08 18:45:13" 这种方式设定日期。
如:<div class="fnTimeCountDown" data-end="2018/07/08 18:45:13">......</div>
这样子。