限时购--倒计时?

Posted 2020-10-11 shengnan_2017

//html

<div class="time left">
    <h4>16点场</h4>
    <p>距离结束还剩</p>
    <div class="timeBox">
        <span>00</span>:<span>00</span>:<span>00</span>
        </div>
        <a href="#">查看全部 ></a>
</div>   

CSS

#limit .time{
    width: 224px;
    height: 377px;
    text-align: center;
    background: url(../images/time_bg.jpg);
}
#limit .time h4{
    font-size: 28px;
    font-weight: normal;
    color: #615548;
    margin-top: 60px;
}
#limit .time p{
    margin: 40px 0 20px 0;
    font-size: 18px;
    color: #615548;
}
#limit .timeBox span{
    display: inline-block;
    width: 40px;
    line-height: 40px;
    font-size: 18px;
    background: #615548;
    border-radius: 5px;
    margin: 0 2px 0 2px;
    color: #FFFFFF;
}
#limit .time a{
    display: block;
    width: 110px;
    line-height: 30px;
    color: #FFFFFF;
    background: #a7936e;
    border-radius: 15px;
    margin: 30px auto 0 auto;
}

JS

//倒计时功能函数

function showTime(){
    var endTime=new Date(2017,9,12,16);　　//2017-10-12, 16:00
    if (new Date()<endTime) {
        var overTime=yx.cutTime(endTime);
        spans[0].innerHTML=yx.format(overTime.h);
        spans[1].innerHTML=yx.format(overTime.m);
        spans[2].innerHTML=yx.format(overTime.s);
    }else{
        clearInterval(timer);
            
    }
}

 

封装函数，实现代码复用

//把当前时间的时间戳转为"年-月-日"  ”时：分：秒“

function cutTime(target){
    var currentDate=new Date();
    var v=Math.abs(target-currentDate);
        
    return {
        d:parseInt(v/(24*3600000)),
        h:parseInt(v%(24*3600000)/3600000),
        m:parseInt(v%(24*3600000)%3600000/60000),
        s:parseInt(v%(24*3600000)%3600000%60000/1000),
    };
},

 

//时间补0函数
function format(v){
    return v<10?\'0\'+v:v;
}

 

大致效果如下：