一个页面多个倒计时 js

jQuery倒计时（CountDown）小插件

一个页面多个记时 js

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


/*
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是否能用。本人试的时候确实是不行。直接用以上代码即可实现一个页面多个倒计时。）

一个页面多个记时 js

jQuery倒计时（CountDown）小插件

相关推荐