码迷,mamicode.com
首页 > 其他好文 > 详细

限时购--倒计时?

时间:2017-10-16 14:59:15      阅读:134      评论:0      收藏:0      [点我收藏+]

标签:ndt   box   分享   代码复用   func   nbsp   fun   form   结束   

//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;
}

 

大致效果如下:

技术分享

限时购--倒计时?

标签:ndt   box   分享   代码复用   func   nbsp   fun   form   结束   

原文地址:http://www.cnblogs.com/shengnan-2017/p/7676715.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!