【个人制作】前端jquery倒计时

一、首先是引入jquery:

<script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

二、代码:

  <div id="cc"></div>
        <script>
            var date1=new Date();
            var date2=new Date();
            $('#cc').countDown({
                start:Date.parse(date1),
                end:date2.setHours(date2.getHours()+2),
                format:{d:'',H:'小时',i:'',s:''}
            });
        </script>

功能主要代码:

$.fn.countDown=function (options) {
    //默认配置
    var defaults = {
        start:0,
        end:0,
        format:{d:'天',H:'小时',i:'分',s:'秒'}
    };
    var options = $.extend(defaults,options);
    var _this=$(this);
    var between=options.end-options.start;
    if (between<0){
        between=0
    }
    var interval = window.setInterval(function() {
        if(between < 1000){
            clearInterval(interval);
        }
        var date=between;
        var html='';
        var days=parseInt(date / (1000 * 60 * 60 * 24));
        var tag=false;
        if (days>0){
            html+='<span class="day">'+days+'</span><i>'+options.format.d+'</i>'
            date-=days*(1000 * 60 * 60 * 24);
            tag=true;
        }
        var hour=parseInt(date / (1000 * 60 * 60 ));
        if (tag||hour>0){
            html+='<span class="hour">'+hour+'</span><i>'+options.format.H+'</i>'
            date-=hour*(1000 * 60 * 60);
            tag=true;
        }
        var minute=parseInt(date / (1000 * 60));
        if (tag||minute>0){
            html+='<span class="minute">'+minute+'</span><i>'+options.format.i+'</i>'
            date-=minute*(1000 * 60);
            tag=true;
        }
        var second=parseInt(date / (1000));
        if (tag||second>0){
            html+='<span class="day">'+second+'</span><i>'+options.format.s+'</i>'
            date-=second*(1000);
            tag=true;
        }
        _this.html(html);
        between-=1000;
    },1000);
};

 

posted @ 2017-11-02 10:17  辉哥哥-shine  阅读(108)  评论(0)    收藏  举报