Exigences : obtenez l'heure de début et l'heure de fin du jeu. (La course compte !!)
(1) Si ce n'est pas l'heure de début du jeu, il affichera 00:00:00.
(2) S'il s'agit de l'heure de début mais pas de l'heure de fin, le temps écoulé depuis l'heure de début s'affichera.
(3) Si l'heure de fin est dépassée, le temps total s'affichera, c'est-à-dire l'heure de fin du jeu moins l'heure de début.
isBeforeStart : le jeu n'a pas encore commencé isOver le jeu est terminé
<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>défini dans les données
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)
}
}