标签:style blog http color io ar java sp div
案例截图
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>
标签:style blog http color io ar java sp div
原文地址:http://www.cnblogs.com/dtdxrk/p/4028395.html