一个页面多个倒计时 js

jQuery倒计时(CountDown)小插件

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

  1. /*
  2. jquery.countdown.js
  3. */
  4. (function($){
  5. var countdown = function(item, config)
  6. {
  7. var seconds = parseInt($(item).attr(config.attribute));
  8. var timer = null;
  9. var doWork = function()
  10. {
  11. if(seconds >= 0)
  12. {
  13. if(typeof(config.callback) == "function")
  14. {
  15. var data = {
  16. total : seconds ,
  17. second : Math.floor(seconds % 60) ,
  18. minute : Math.floor((seconds / 60) % 60) ,
  19. hour : Math.floor((seconds / 3600) % 24) ,
  20. day : Math.floor(seconds / 86400)
  21. };
  22. config.callback.call(item, seconds, data, item);
  23. }
  24. seconds --;
  25. }else{
  26. window.clearInterval(timer);
  27. }
  28. }
  29. timer = window.setInterval(doWork, 1000);
  30. doWork();
  31. };
  32. var main = function()
  33. {
  34. var args = arguments;
  35. var config = { attribute : ‘data-seconds‘, callback : null };
  36. if(args.length == 1)
  37. {
  38. if(typeof(args[0]) == "function") config.callback = args[0];
  39. if(typeof(args[0]) == "object") $.extend(config, args[0]);
  40. }else{
  41. config.attribute = args[0];
  42. config.callback = args[1];
  43. }
  44. $(this).each(function(index, item){
  45. countdown.call(item, item, config);
  46. });
  47. };
  48. $.fn.countdown = main;
  49. })(jQuery);

使用实例:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title></title>
  5. <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  6. <script type="text/javascript" src="jquery.countdown.js"></script>
  7. </head>
  8. <body>
  9. <script type="text/javascript">
  10. $(function(){
  11. $(‘ul‘).countdown(function(s, d){
  12. var items = $(this).find(‘span‘);
  13. items.eq(0).text(d.total);
  14. items.eq(1).text(d.second);
  15. items.eq(2).text(d.minute);
  16. items.eq(3).text(d.hour);
  17. items.eq(4).text(d.day);
  18. });
  19. });
  20. </script>
  21. <ul data-seconds="3344"> //值3344 为总共的秒数
  22. <li>总共<span>-</span></li>
  23. <li><span>-</span></li>
  24. <li><span>-</span></li>
  25. <li><span>-</span></li>
  26. <li><span>-</span></li>
  27. </ul>
  28. <ul data-seconds="97545">
  29. <li>总共<span>-</span></li>
  30. <li><span>-</span></li>
  31. <li><span>-</span></li>
  32. <li><span>-</span></li>
  33. <li><span>-</span></li>
  34. </ul>
  35. <ul data-seconds="10">
  36. <li>总共<span>-</span></li>
  37. <li><span>-</span></li>
  38. <li><span>-</span></li>
  39. </ul>
  40. </body>
  41. </html>
基本上我们从jquery上现在有这个jquery.countdown.js 名字是一样的,但是我看里面的内容是不一样的。因而我用的是以上代码。 (至于从官网上下载的jquery.countdown.js是否能用。本人试的时候确实是不行。直接用以上代码即可实现一个页面多个倒计时。

一个页面多个倒计时 js,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。