分享一个自己写的jquery倒计时小插件

种草德鲁伊 2011-07-02 04:02:07

加精

前两天帮人写的

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

demo.html





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

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

...全文

5924 143 打赏收藏转发到动态举报

写回复

用AI写文章

143 条回复

切换为时间正序

请发表友善的回复…

发表回复

aliuges 2013-08-16

打赏
举报

雅蠛蝶，支持一下。

lonelyk 2013-08-14

打赏
举报

好东东.收藏下~~

yihu_wu 2013-08-05

打赏
举报

不错，顶一个。

mingrenenp 2013-07-04

打赏
举报

rihaduo202 2013-05-07

打赏
举报

虽然年代已久，但还是支持下·· 无私分享自己劳动成果的人都是好人··

天空的泪 2013-04-19

打赏
举报

不错挺好的……

ccliaoshil 2011-08-25

打赏
举报

要认真学习一下了

furnace09 2011-07-30

打赏
举报

顶一下

chen_bruce 2011-07-11

打赏
举报

收了

long9158 2011-07-08

打赏
举报

谢谢了高手啊收藏

mnihyf 2011-07-08

打赏
举报

新手，学习。

yhg0724 2011-07-07

打赏
举报

好的我试试

LL15078383426 2011-07-07

打赏
举报

不大懂了，呵呵

gkanging 2011-07-07

打赏
举报

好好研究一下，刚开始学习，谢谢

笑是我的药 2011-07-07

打赏
举报

jquery与java 有什么关系，，看上面几楼回复有点．．．．．．

mdan205 2011-07-07

打赏
举报

挺很好啊

aaa9163 2011-07-07

打赏
举报

ghioweikwi

love560 2011-07-07

打赏
举报

顶下~

种草德鲁伊 2011-07-07

打赏
举报

[Quote=引用 122 楼 missan 的回复:]

lz你写的天花乱坠，故意让人看不懂啊
1. 开头故意用个$符号当参数，再传个jQuery进去，你不会像下面的html里一样，直接用$就是jQuery啊；
2. countdown作为函数名用了两次，造成名称混淆，对jQuery不熟的人一下就晕了。

要较真的话，倒计时算法也有问题，运行时间长了就不准了。

[/Quote]

1.因为jquery的$是可以转让给其他js库的，就按习惯来做了
3.本来只是简单的显示用，就不要求这么精确了

种草德鲁伊 2011-07-07