【JQuery插件】团购倒计时

浏览数：46 / 时间：2015年06月09日

案例截图

 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>