One page with multiple countdown js

JQuery CountDown (CountDown)

It can be used for multiple countdown times on a single page and is convenient to call.

 
 

  
  
/*
  
  
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);
 
 

Instance used:

 
 

  
  

  
  

  
  

  
  

  
  
<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>
  
  

  
  

  
  
<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>
  
  
 
   

     // The value 3344 indicates the total number of seconds. 
    
 
 
    
Total-seconds
 
    
 
 
    
-Seconds
 
    
 
 
    
-Minute
 
    
 
 
    
-Hour
 
    
 
 
    
-Day
 
    
 
   
  
  
 
   
 
    
 
 
    
Total-seconds
 
    
 
 
    
-Seconds
 
    
 
 
    
-Minute
 
    
 
 
    
-Hour
 
    
 
 
    
-Day
 
    
 
   
  
  
 
   
 
    
 
 
    
Total-seconds
 
    
 
 
    
-Seconds
 
    
 
 
    
-Minute
 
    
 
   
  
  

  
  
Basically, the name of jquery. countdown. js is the same from jquery, but the content in it is different. Therefore, I use the above Code. (Check whether jquery. countdown. js downloaded from the official website can be used. I did not try it myself. Use the code above to implement multiple countdown times on a page .)