最近领导安排准备个倒计时,上网找了些插件,都不是很满意,于是自己动手写了个,直接上代码吧。

HTML:

<div id="showDiv" class="countDown">
</div>

 

JS:

 var clickt = '2015/10/9 1:10:00';

    function countdown(d,clicktime){//d为过期天数,clicktime为后台传过来的点击时间
        var clickTime = new Date(clicktime);//此处传入的时间为点击记录时间
        var disTime = (new Date()).getTime() - clickTime.getTime();

        var valueTime = 24*3600*1000*d;
        var ts = (valueTime-disTime)/1000;//计算剩余的毫秒数
        
        var dd = parseInt((ts/3600)/24);//计算剩余的天数
        var hh = parseInt(ts/3600%24);//计算剩余的小时数
        var mm = parseInt((ts/60)%60);//计算剩余的分钟数
        var ss = parseInt(ts%60);//计算剩余的秒数

        if(clickTime && disTime>0)//点击时间发生在过去
        {
            if(ts > 0){//规定时间内
                var htmlsDays = '剩余'+checkTime(dd)+'天' +checkTime(hh)+ '小时' +checkTime(mm)+ '分钟' + checkTime(ss)+ '秒';
                var htmlStr = '剩余'+checkTime(hh)+ '小时' +checkTime(mm)+ '分钟' + checkTime(ss)+ '秒';
                if(dd>0){
                    $('.countDown').html(htmlsDays);
                }else{
                    $('.countDown').html(htmlStr);
                }

            }else{
                $('.countDown').html('Sorry,已超过'+d+'天的规定的操作期限,请重新订阅!');
            }
        }else{
            $('.countDown').html('error~');
        }
    }

    function checkTime(i){
        if(i<10){
            i = '0'+i;
        }
        return i;
    }

    $(function(){
        setInterval('countdown(2,clickt)',1000);
    })

 

另外还从其它地方看到一个24小时的倒计时,顺便粘出来,忘了从哪里看到的了,如果有侵权,请联系我删掉。

 $(function(){
        //点击开始倒计时
        $('#click').click(function(){
            time=setInterval("run()",1000);
        })
    })
    var time;
    var h=23;
    var m=59;
    var s=59;
    //进行倒计时显示
    function run(){
        --s;
        if(s<0){
            --m;
            s=59;
        }
        if(m<0){
            --h;
            m=59
        }
        if(h<0){
            s=0;
            m=0;
        }
        $('#showDiv').html('您还有' +h+":"+m+":"+s + ',请尽快处理');
    }

 

自己练手的项目,请指正,共同进步。

posted on 2015-10-10 12:35  Jenny_2015  阅读(3589)  评论(1编辑  收藏  举报