需求:得到比赛开始时间，结束时间。（比赛正计时！！）
（1）若未到比赛开始时间，显示00:00:00。
（2）若到了开始时间未到结束时间，显示距离开始时间多久一直变化。
（3）若超过结束时间，显示总用时，就是比赛结束时间减去开始时间。
isBeforeStart:比赛未未开始 isOver比赛已经结束
<p>比赛用时</p>
<p class="match-time" v-if="isBeforeStart">00:00:00</p>
<p class="match-time" v-else-if="isOver">{
{ formatTime(totalTime) }}</p>
<p class="match-time" v-else>{
{ formatTime(useTime) }}</p>data中定义
data(){
return{
startTime: '2023-04-13 20:33:22',//比赛开始时间
endTime: '2023-04-14 21:33:22',//比赛结束时间
useTime: '', // 倒计时
timerMatch: null //计时器
}
},
mounted(){
this.getTime()
},
beforeDestroy () {
this.timerMatch = null //销毁计时器，避免内存泄露
},
computed: { //计算属性
isBeforeStart () {
return new Date() < this.startTime
},
isOver () {
return new Date() > this.endTime
},
totalTime () {
return Math.floor((new Date(this.endTime) - new Date(this.startTime)) / 1000)
}
},
methods:{
getTime(){
//......一般是接口返回比赛时间，自己的逻辑自行修改......
this.startTime = new Date(this.startTime)
this.endTime = new Date(this.endTime)
this.useTime = Math.floor((new Date() - this.startTime) / 1000)
this.timerMatch = setInterval(() => {
this.useTime = Math.floor((new Date() - this.startTime) / 1000)
if (new Date() >= this.endTime) {
clearInterval(this.timerMatch)
}
}, 1000)
}
}