活动倒计时 天 时 分 秒
需求:若大于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>