案例截图
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>
时间： 2024-09-29 11:21:27