Jquery倒计时
一个页面中多个倒计时。
jquery代码:
(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), // 天数 sum_hour : Math.floor((seconds / 3600)), // 多少小时 }; 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);
html页面:
<!DOCTYPE html> <html> <head> <title>页面中多个倒计时</title> <meta charset="utf-8"> <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/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); items.eq(5).text(d.sum_hour); }); }); </script> <ul data-seconds="9999999"> <li>总共<span>-</span>秒</li> <li><span>-</span>秒</li> <li><span>-</span>分</li> <li><span>-</span>时</li> <li><span>-</span>天</li> <li><span>-</span>小时</li> </ul> <ul data-seconds="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>