一个页面多个倒计时 js

青旅半醒 2022-08-26 08:13 179阅读 0赞

# [jQuery倒计时（CountDown）小插件][jQuery_CountDown] #

[![jquery countdown][]][jquery countdown]

可以用于一个页面多个倒计时，调用也非常方便。

/* 
       jquery.countdown.js 
       */ 
       (function($){
         
           var countdown = function(item, config) 
           {
         
               var seconds = parseInt($(item).attr(config.attribute)); 
               var timer = null; 
               var doWork = function() 
               {
         
                   if(seconds >= 0) 
                   {
         
                       if(typeof(config.callback) == "function") 
                       {
         
                           var data = {
         
                               total : seconds , 
                               second : Math.floor(seconds % 60) , 
                               minute : Math.floor((seconds / 60) % 60) , 
                               hour : Math.floor((seconds / 3600) % 24) , 
                               day : Math.floor(seconds / 86400) 
                           }; 
                           config.callback.call(item, seconds, data, item); 
                       } 
                       seconds --; 
                   }else{
         
                       window.clearInterval(timer); 
                   } 
               } 
               timer = window.setInterval(doWork, 1000); 
               doWork(); 
           }; 
           var main = function() 
           {
         
               var args = arguments; 
               var config = {
          attribute : 'data-seconds', callback : null }; 
               if(args.length == 1) 
               {
         
                   if(typeof(args[0]) == "function") config.callback = args[0]; 
                   if(typeof(args[0]) == "object") $.extend(config, args[0]); 
               }else{
         
                   config.attribute = args[0]; 
                   config.callback = args[1]; 
               } 
               $(this).each(function(index, item){
         
                   countdown.call(item, item, config); 
               }); 
           }; 
           $.fn.countdown = main; 
       })(jQuery);

使用实例：

<!DOCTYPE html> 
       <html> 
       <head> 
       <title></title> 
       <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
       <script type="text/javascript" src="jquery.countdown.js"></script> 
       </head> 
       <body> 
       <script type="text/javascript"> 
       $(function(){
         
           $('ul').countdown(function(s, d){
         
               var items = $(this).find('span'); 
               items.eq(0).text(d.total); 
               items.eq(1).text(d.second); 
               items.eq(2).text(d.minute); 
               items.eq(3).text(d.hour); 
               items.eq(4).text(d.day); 
           }); 
       }); 
       </script> 
       <ul data-seconds="3344">     //值3344 为总共的秒数 
           <li>总共<span>-</span>秒</li> 
           <li><span>-</span>秒</li> 
           <li><span>-</span>分</li> 
           <li><span>-</span>时</li> 
           <li><span>-</span>天</li> 
       </ul> 
       <ul data-seconds="97545"> 
           <li>总共<span>-</span>秒</li> 
           <li><span>-</span>秒</li> 
           <li><span>-</span>分</li> 
           <li><span>-</span>时</li> 
           <li><span>-</span>天</li> 
       </ul> 
       <ul data-seconds="10"> 
           <li>总共<span>-</span>秒</li> 
           <li><span>-</span>秒</li> 
           <li><span>-</span>分</li> 
       </ul> 
       </body> 
       </html> 
      
     
      
    
     
      
     
      
       
      基本上我们从jquery上现在有这个
      
       jquery.countdown.js 名字是一样的，但是我看里面的内容是不一样的。因而我用的是以上代码。 （至于从官网上下载的jquery.countdown.js是否能用。本人试的时候确实是不行。直接用以上代码即可实现一个页面多个倒计时。）

[jQuery_CountDown]: http://www.maochunjie.com/tech/1409.html
[jquery countdown]: http://www.maochunjie.com/wp-content/uploads/2013/05/jquery-countdown.jpg