活动倒计时 天 时 分 秒

Posted 2021-03-24 wangrong-smile

需求：若大于24小时显示天，若小于24小时，显示秒

template

<span v-if="day>0">
     <span class="fuliTime">{{day}}</span><span class="fuliPoint">天:</span>
</span>
<span class="fuliTime">{{hour}}</span><span class="fuliPoint">时:</span>
     <span class="fuliTime">{{minute}}</span><span class="fuliPoint">分<span v-if="day<=0">:</span></span>
     <span v-if="day<=0">
     <span class="fuliTime">{{sec}}</span><span class="fuliPoint">秒</span>
</span>

script

export defalut {
    data (){
        return {
            endTime:'2019-12-11 08:38:00',//应为接口获取到的结束时间
            day:'',
            hour:'',
            minute:'',
            sec:''
        }
    },
    created (){
        // 倒计时
        let that = this
        that.setEndTime();
    },
    methods: {
        var that = this;
        var interval = setInterval(function timestampToTime(){
        var date = (new Date(that.endTime)) - (new Date()); //计算剩余的毫秒数
        if(date <= 0){
          that.day = '00';
          that.hour = '00';
          that.minute = '00';
          that.sec = '00';
          clearInterval(interval)
        }else{
          that.day = parseInt(date / 1000 / 60 / 60 / 24 , 10);
          if(that.day < 10){
            that.day = "0" +that.day
          }
          that.hour = parseInt(date / 1000 / 60 / 60 % 24 , 10);
          if(that.hour < 10){
            that.hour = "0" +that.hour
          }
          that.minute = parseInt(date / 1000 / 60 % 60, 10);//计算剩余的分钟
          if(that.minute < 10){
            that.minute = "0" + that.minute
          } 
          that.sec = parseInt(date / 1000 % 60, 10);//计算剩余的秒数 
          if(that.sec < 10){
            that.sec = "0" + that.sec
          }
          return that.day + that.hour + that.minute + that.sec; 
        }
      },1000);
    },
    }
}

css

<style>
.fuliTime {
  background:#FE5959;
  color:#FFF;
  padding: .1vw .4vw;
  font-size:2.664vw;
  font-family: PingFangSC-Regular, sans-serif;
  font-weight:normal;
  text-align: center;
  border-radius: .7vw;
}
.fuliPoint {
  color: #FE5959;
  padding-left:.6vw;
  font-size: .2vw;
}
</style>