JS精准倒计时(支持自定义模板)

/**
 * 倒计时 Create By TuJia @2017.10.17
 * 使用方法:
 * leftTimer.run(container[,theme][,callback]);
 *
 * 支持 jQuery选择器 及 原生选择器(不依赖jQuery)
 * 
 * 示例(jquery 选择器):
 * leftTimer.run($('.countdown'));
 * leftTimer.run($('.countdown'), 'D天H时M分S秒');
 * leftTimer.run($('.countdown'), 'D天H时M分S秒', function(obj){
 *   // do some things
 *   // obj.html('已结束'); 或 location.reload();
 * });
 *
 * 示例(原生选择器):
 * leftTimer.run(document.querySelectorAll('.countdown'));
 * leftTimer.run(document.querySelectorAll('.countdown'), 'D天H时M分S秒');
 * leftTimer.run(document.querySelectorAll('.countdown'), 'D天H时M分S秒', function(obj){
 *   // do some things
 *   // obj.innerHTML = '已结束'; 或 location.reload();
 * });
 */

var leftTimer = {
    startTime:0,
    count:0,
    interval:1000,
    oneday:3600 * 24,
    str:'',
    day:0,
    hour:0,
    minute:0,
    second:0,
    show_day:false,
    show_hour:false,
    show_minute:false,
    show_second:false,
    offset:0,
    next_time:0,
    run:function(container, theme, cb){
        var scope       = this;
        
        scope.startTime = new Date().getTime();
        scope.next_time  = scope.interval;
        scope.count     = 0;
        scope.offset    = 0;
        
        theme           = theme || "D天H时M分S秒";
        cb              = cb || function(){ location.reload() };
        
        scope.show_day    = theme.indexOf('D')!=-1;
        scope.show_hour   = theme.indexOf('H')!=-1;
        scope.show_minute = theme.indexOf('M')!=-1;
        scope.show_second = theme.indexOf('S')!=-1;

        for(var i=0,len=container.length; i<len; i++){
            var _this = container[i];
            _this.setAttribute('data-lefttime', parseInt(_this.innerHTML));
            _this.innerHTML = 'loading...';
        }
        scope.countdown(container, theme, cb);
    },
    countdown:function(container, theme, cb){
        var scope = this;

        scope.offset      = new Date().getTime() - (scope.startTime + scope.count * scope.interval);
        scope.next_time   = scope.interval - scope.offset;

        if(scope.countdown_timer) window.clearTimeout(scope.countdown_timer);
        scope.countdown_timer = window.setTimeout(function(){
            for(var i=0,len=container.length; i<len; i++){
                var obj      = container[i];
                var lefttime = obj.getAttribute('data-lefttime');
                lefttime--;
                obj.setAttribute('data-lefttime', lefttime);

                if(lefttime==0){
                    // 回调
                    if($) obj = $(obj);
                    cb(obj);
                }else if(lefttime<0){
                    // code
                }else{
                    scope.day    = Math.floor(lefttime / scope.oneday);//还有几天
                    scope.hour   = Math.floor((lefttime - scope.day * scope.oneday) / 3600);//还有几小时
                    scope.minute = Math.floor((lefttime - scope.day * scope.oneday - 3600 * scope.hour) / 60);//还有几小时
                    scope.second = lefttime - scope.day * scope.oneday - 3600 * scope.hour - 60 * scope.minute;//还有几秒

                    if(scope.show_day==false) scope.hour += scope.day*24;
                    if(scope.show_hour==false) scope.minute += scope.hour*60;
                    if(scope.show_minute==false) scope.second += scope.minute*60;

                    scope.str = '';
                    scope.str = theme.replace('D', scope.day);
                    scope.str = scope.str.replace('H', scope.hour);
                    scope.str = scope.str.replace('M', scope.minute);
                    scope.str = scope.str.replace('S', scope.second);
                    obj.innerHTML = scope.str;
                }
            }

            scope.count++;

            scope.countdown(container, theme, cb);
        }, scope.next_time);
    }
};

Git 地址:https://github.com/Tiacx/leftTimer.js

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值