注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Bioinformatics home

 
 
 

日志

 
 

Jquery 计时器  

2011-07-04 18:27:06|  分类: Jquery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |


jquery.countdown.js
JScript code

(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
HTML code

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

  评论这张
 
阅读(4891)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017