jQuery实现倒计时效果

最新推荐文章于 2022-12-28 11:22:32 发布

barnett_y

最新推荐文章于 2022-12-28 11:22:32 发布

阅读量1.1k

点赞数

分类专栏：【Jquery点滴知识】

【Jquery点滴知识】专栏收录该内容

50 篇文章 1 订阅

订阅专栏

jQuery实现倒计时效果-杨秀徐

本实例效果：剩余368天22小时39分57秒结束

代码简单易懂，适用各种倒计时；

http://www.cnblogs.com/sntetwt/category/287335.html

 
           <!DOCTYPE html> 
          
           <head> 
          
           <title>jQuery实现倒计时效果-杨秀徐</title> 
          
           <script type= 
           "text/javascript"  
           src= 
           "/scripts/jquery.js" 
           ></script> 
          
           <script type= 
           "text/javascript" 
           > 
          
           /* 
          
           @作者：杨秀徐，主页 http://www.gzmsg.com 
          
           @用途：jQuery实现倒计时效果$(".time").countDown({time: "2015/12/1 10:00:00",type:0}) 
          
           @参数：time: 结束时间,type:显示方式（0显示天数，1不显示天数） 
          
           */ 
          
           $.fn.countDown =  
           function  
           (opt) { 
          
           var  
           opt = $.extend({ 
          
           time :  
           null 
           , 
          
           type : 0 
          
           }, opt); 
          
           var  
           edtime   =  
           new  
           Date(opt.time).getTime(),                   
           //月份是实际月份-1 
          
           edsecond = (edtime -  
           new  
           Date().getTime()) / 1000;  
          
           var  
           eday    = $( 
           this 
           ).find( 
           '.day' 
           ), 
          
           ehour   = $( 
           this 
           ).find( 
           '.hour' 
           ), 
          
           eminute = $( 
           this 
           ).find( 
           '.minute' 
           ), 
          
           esecond = $( 
           this 
           ).find( 
           '.second' 
           ); 
          
           var  
           timer = setInterval( 
           function  
           () { 
          
           if  
           (edsecond > 1) { 
          
           edsecond -= 1; 
          
           var  
           day = Math.floor((edsecond / 3600) / 24), 
          
           hour = Math.floor((edsecond / 3600) % 24), 
          
           minute = Math.floor((edsecond / 60) % 60), 
          
           second = Math.floor(edsecond % 60); 
          
           if 
           (opt.type===0){ 
          
           $(eday).text(day);                                   
           //计算天 
          
           $(ehour).text(hour < 10 ?  
           "0"  
           + hour : hour);        
           //计算小时 
          
           } 
           else 
           { 
          
           hour = day * 24; 
          
           $(ehour).text(hour < 10 ?  
           "0"  
           + hour : hour);        
           //计算小时-没有天数  
          
           } 
          
           $(eminute).text(minute < 10 ?  
           "0"  
           + minute : minute);    
           //计算分钟 
          
           $(esecond).text(second < 10 ?  
           "0"  
           + second : second);    
           //计算秒杀 
          
           }  
           else  
           { 
          
           clearInterval(timer); 
          
           } 
          
           }, 1000); 
          
           } 
          
           $( 
           function  
           () { 
          
           $( 
           ".time" 
           ).countDown({ 
          
           time:  
           "2015/12/1 10:00:00" 
           , 
          
           type:0 
          
           }); 
          
           }); 
          
           </script> 
          
           </head> 
          
           <body> 
          
           <div  
           class 
           = 
           "time" 
           >剩余<span  
           class 
           = 
           "day" 
           >0</span>天<span  
           class 
           = 
           "hour" 
           >00</span>小时<span  
           class 
           = 
           "minute" 
           >00</span>分<span  
           class 
           = 
           "second" 
           >00</span>秒结束</div> 
          
           </body> 
          
           </html>