倒计时插件（及自动循环倒计时）代码

可以在这个网页在线测试 ↓↓↓
在线代码编辑器：https://www.jq22.com/webqd4832

HTML部分：

<div id="timer" class="timer">仅剩：<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>
 
<div id="timer2" class="timer">仅剩：<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>
 
<div id="timer3" class="timer">仅剩：<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>

CSS部分：

.timer{padding:15px 0;line-height:18px;color:#fff; background-color: #f1425b; margin-bottom: 50px;}
.timer span{background-color:#000;border-radius:4px;color:#fff;padding:0 5px;margin:0 2px;}

JS插件代码：

$.fn.timerBox=function(options){
    var defaults={
        endTime:'2015/05/14 16:00:00',
        endHtml:"抢购已经结束！",
        zero:true
    },
        opts=$.extend(defaults,options),
        htmlBox=this,
        dayBox=htmlBox.find(".day"),
        hourBox=htmlBox.find(".hour"),
        miniteBox=htmlBox.find(".minite"),
        secondBox=htmlBox.find(".second"),
        timer;
 
    function timerFn(){
    var endTime=new Date(opts.endTime),
        nowTime=new Date(),
        leftSecond=parseInt((endTime.getTime()-nowTime.getTime())/1000),
        day=parseInt(leftSecond/3600/24),
        hour=parseInt((leftSecond/3600)%24),
        minite=parseInt((leftSecond/60)%60),
        second=parseInt(leftSecond%60);
        if(opts.zero){getZero()};
 
        if(leftSecond>0){
            dayBox.html(day);
            hourBox.html(hour);
            miniteBox.html(minite);
            secondBox.html(second);
            timer=setTimeout(timerFn,1000);
        }else{
            htmlBox.html(opts.endHtml);
            clearTimeout(timer);
        };
 
        function getZero(){
        day<10?day="0"+day:day;
        hour<10?hour="0"+hour:hour;
        minite<10?minite="0"+minite:minite;
        second<10?second="0"+second:second;
        };
 
    };
 
 
 
    timerFn();
 
};

插件使用JS：

$(function(){
    $("#timer").timerBox({
        endTime:'2015/08/14 16:00:00'
    });
 
    $("#timer2").timerBox({
        endTime:'2015/08/18 18:00:00'
    });
 
 
    $("#timer3").timerBox({
        endTime:'2015/08/16 18:00:00',
        zero:false
    });
 
});

使用说明：

$("#timer").timerBox({
        endTime:'2015/05/14 16:00:00',  //设置结束时间
        endHtml:"抢购已经结束！",    //结束后的HTML字符串
        zero:true    // 是否开启前置加 “0”
    });

自动循环的倒计时代码：

设置日期可自动循环。

function timerBox(idstr,timestr,day){
    var timeBox=$(idstr),
    t=day,
    starTime=new Date(timestr),
    timer;
    function count(){
    endTime=new Date(),
    newTime=parseInt((endTime.getTime()-starTime.getTime())/1000),
    n=parseInt(newTime/3600/24/t),
    leftSecond=t*24*3600-(newTime-t*n*24*3600),
    day=parseInt(leftSecond/3600/24),
    hour=parseInt((leftSecond/3600)%24),
    minite=parseInt((leftSecond/60)%60),
    second=parseInt(leftSecond%60);
    if(leftSecond>0){
        timeBox.html("仅剩:<b>" + hour + "</b>时<b>" + minite + "</b>分<b>" + second + "</b>秒");
        timer=setTimeout(count,1000);
    }else{
        timeBox.html("抢购已经结束！");
        clearTimeout(timer);
    };
 
    };
 
    count();
     
};
timerBox("#timer",'2015/05/11 23:59:59',20);
timerBox("#timer2","2015/05/18 10:00:00",5);

HTML部分：

<p>倒计时一</p>
<div id="timer" class="timer"></div>
<p>倒计时二</p>
<div id="timer2" class="timer"></div>

CSS部分：

.timer{padding:15px 0;line-height:18px;color:#fff; background-color: #f1425b;}
.timer b{background-color:#000;border-radius:4px;color:#fff;padding:0 5px;margin:0 2px;}

------分割线--------------------------------------------------
例子：

HTML部分：

<div id="timer" class="timer">仅剩：<span class="day"></span>天<span class="hour"></span>时<span class="minite"></span>分<span class="second"></span>秒
</div>

CSS部分：

.timer{padding:15px 0;line-height:18px;color:#fff; background-color: #f1425b; margin-bottom: 50px;}
.timer span{background-color:#000;border-radius:4px;color:#fff;padding:0 5px;margin:0 2px;}

js部分

<!--倒计时-->
<script type="text/javascript">

function timerBox(idstr,timestr,day){
    var timeBox=$(idstr),
    t=day,
    starTime=new Date(timestr),
    timer;
    function count(){
    endTime=new Date(),
    newTime=parseInt((endTime.getTime()-starTime.getTime())/1000),
    n=parseInt(newTime/3600/24/t),
    leftSecond=t*24*3600-(newTime-t*n*24*3600),
    day=parseInt(leftSecond/3600/24),
    hour=parseInt((leftSecond/3600)%24),
    minite=parseInt((leftSecond/60)%60),
    second=parseInt(leftSecond%60);
    if(leftSecond>0){
        timeBox.html("优惠倒计时 :<b>" + hour + "</b>:<b>" + minite + "</b>:<b>" + second + "</b>");
        timer=setTimeout(count,1000);
    }else{
        timeBox.html("抢购已经结束！");
        clearTimeout(timer);
    };
 
    };
 
    count();
     
};
timerBox("#timer",'2021/05/11 23:59:59',20);

</script>
<!--倒计时-->