码迷,mamicode.com
首页 > Web开发 > 详细

【JQuery插件】团购倒计时

时间:2014-10-16 13:32:02      阅读:297      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   ar   java   sp   div   

案例截图

bubuko.com,布布扣

 

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 <title>JS时间倒计时</title>
 6 </head>
 7  
 8 <body>
 9 
10 <div id="dome1">
11   <span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>12 </div>
13 
14 <div id="dome2">
15   <span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>16 </div>
17 <div id="dome3">
18   <span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>19 </div>
20 <div id="dome4">
21   <span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>22 </div>
23 <div id="dome5">
24   <span class="day"></span>天|<span class="hour"></span>时|<span class="min"></span>分|<span class="sec"></span>25 </div>
26 
27 
28 
29 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
30 
31 <script>
32 ;(function($){
33     $.fn.extend({
34         CountDown: function(StartDate, EndDate) {
35             var Timmer = null,
36                 $this = $(this),
37                 start_time = StartDate.getTime(),end_time = EndDate.getTime(),
38                 _tempTime,day,hour,min,sec,
39                 $day = $this.find(.day),$hour = $this.find(.hour),$min = $this.find(.min),$sec = $this.find(.sec);
40             if(start_time>end_time){throw new Error("#"+$this.attr(id)+开始结束时间不正确!)}
41             playTime();
42             function playTime(){
43                 if(Timmer){clearTimeout(Timmer)}
44                 end_time-=1000;
45                 if(end_time<start_time){$this.addClass(timeover);return false;}
46                 _tempTime = end_time - start_time;
47                 day = Math.floor(_tempTime/86400000);
48                 _tempTime -= day*86400000;
49                 hour = Math.floor(_tempTime/3600000);
50                 _tempTime -= hour*3600000;
51                 min = Math.floor(_tempTime/60000);
52                 _tempTime -= min*60000;
53                 sec = Math.floor(_tempTime/1000);
54                 $day.text(day);
55                 $hour.text(hour);
56                 $min.text(min);
57                 $sec.text(sec);
58                 Timmer = setTimeout(playTime,1000);
59             }
60             return this;
61         }
62     });
63 })(jQuery);
64 
65 $(#dome1).CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/9 11:12:10"));
66 $(#dome2).CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/10 11:11:10"));
67 $(#dome3).CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/12 11:11:10"));
68 $(#dome4).CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/14 11:11:10"));
69 $(#dome5).CountDown(new Date("2014/6/9 11:11:1"), new Date("2014/6/13 11:11:10"));
70 </script>
71 </body>
72 </html>

 

【JQuery插件】团购倒计时

标签:style   blog   http   color   io   ar   java   sp   div   

原文地址:http://www.cnblogs.com/dtdxrk/p/4028395.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!