秒杀活动倒计时效果

最近做商品的秒杀活动需求如下

1.活动前有预热期提示如 距开始：01:00:00:00 （天 时 分 秒）；

2..活动时有距活动结束提示如 距结束：01:00:00:00 （天 时 分 秒）；

代码如下

css部分

.tiemBox{

    position:relative;

    top:240px;

    width:100%;

    height:66px;

    margin:0 auto;

}

.timeTitle{

    font-size:14px;

    font-weight:800;

    color:rgba(43,43,43,1);

    text-align:center;

    padding-top:0.4rem;

}

.countDown{

    display:block;

    text-align:center;

}

.countDownTimeBox{

    width:190px;

    height:20px;

    margin:0 auto;

    font-size:12px;

    display:inline-block;

  }

.countDown .countDownTimeBox .countDownTime{

    width:30px;

    height:20px;

    letter-spacing:2px;

    float:left;

    background:rgba(255,91,76,1);

    color:#fff;

    font-weight:500;

    font-size:18px;

    margin:0;

    text-align:center;

    margin-top:5px;

    line-height:20px;

    padding-left:2px;

 }

.countDown .countDownTimeBox .countDownTime:nth-child(1){

    margin-left:0;

   }

.colon{

    width:10px;

    float:left;

    line-height:30px;

    color:#2b2b2b;

    text-align:center;

}

.countDownWord{

    font-size:12px;

    color:rgba(43,43,43,1);

}

HTML部分

<div class="tiemBox">

<div class="timeTitle">秒杀中,下手要快哦</div>

    <span class="countDown">

        <span class="countDownWord">距结束:</span>

        <div class="countDownTimeBox">

            <span class="countDownTime">00</span>

            <div class="colon">:</div>

            <span class="countDownTime">00</span>

            <div class="colon">:</div>

            <span class="countDownTime">00</span>

            <div class="colon">:</div>

            <span class="countDownTime">00</span>

        </div>

    </span>

</div>

js部分

function showTime(){
var startTime='2019/06/25 23:59:59';
var endTime='2019/07/10 23:59:59'
var date1 = new Date();
var date2 = startTime;
var date3 = new Date(date2).getTime()-date1.getTime();  //时间差的毫秒数
date3>0?($('.countDownWord').html('距开始:')):($('.countDownWord').html('距结束:'),date3 = new Date(endTime).getTime()-date1.getTime());
//天数
var days = Math.floor(date3 / (60 * 60 * 24*1000));
var leave1=date3%(24*3600*1000);    //计算天数后剩余的毫秒数
var hours=Math.floor(leave1/(3600*1000));
//计算相差分钟数
var leave2=leave1%(3600*1000);      //计算小时数后剩余的毫秒数
var minutes=Math.floor(leave2/(60*1000));
//计算相差秒数
var leave3=leave2%(60*1000);      //计算分钟数后剩余的毫秒数
var seconds=Math.round(leave3/1000);
if(days<=0&&hours<=0&&minutes<=0&&seconds<=0){
    $(".countDownTimeBox").html('<span class="countDownTime">00</span><div class="colon">:</div><span         class="countDownTime">00</span><div class="colon">:</div><span class="countDownTime">00</span><div class="colon">:</div><span         class="countDownTime">00</span>');
    clearTimeout("showTime()")
}else{
    if(days<10 && days>=0){
        days="0"+days;
      }
    if(hours<10 && hours>=0){
        hours="0"+hours;
    }
    if(minutes<10 && minutes>=0){
        minutes="0"+minutes;
    }
    if(seconds<10 && seconds>=0){
       seconds="0"+seconds;
    }
    $(".countDownTimeBox").html('<span class="countDownTime">'+days+'</span><div class="colon">:</div><span  class="countDownTime">'+hours+'</span><div class="colon">:</div><span class="countDownTime">'+minutes+'</span><div         class="colon">:</div><span class="countDownTime">'+seconds+'</span>');
    setTimeout("showTime()", 1000);
}
}

最终效果如下

image
image