1掀泳、父組件countdownView.vue
<template>
<div>
<!-- 2 時(小時)=7200000 毫秒 -->
<CountdownSon v-if="difference < 7200000 || difference == 7200000" :difference="difference"></CountdownSon>
</div>
</template>
<script>
import CountdownSon from "./countdownSon";
export default {
name: "countdownView",
data () {
return {
startTime: '2023-04-01 08:00:00',
endTime: '2023-04-01 09:00:00',
difference: 0,
}
},
components: {
CountdownSon,
},
created () {
this.gitInit()
},
methods: {
gitInit () {
const start = new Date(this.startTime);
const end = new Date(this.endTime);
// 計算時間差（毫秒）
this.difference = end.getTime() - start.getTime();
// 將時間差轉(zhuǎn)換為小時
// this.timeDifference = difference / (1000 * 60 * 60)
}
}
};
</script>
1.1 父組件為遍歷出來的列表
<template>
<div>
<!-- 2 時(小時)=7200000 毫秒 -->
<!-- <CountdownSon v-if="difference < 7200000 || difference == 7200000" :difference="difference"></CountdownSon> -->
<div class="card" v-for="(item) in list" :key="item.id">
<CountdownSon :difference="timeDifference(item.startTime, item.endTime)"></CountdownSon>
<p>{{ timeDifference(item.startTime, item.endTime) }}</p>
<p>{{ item.name }}</p>
</div>
</div>
</template>
<script>
import CountdownSon from "./countdownSon";
export default {
name: "countdownView",
data () {
return {
// startTime: '2023-04-01 08:00:00',
// endTime: '2023-04-01 09:00:00',
difference: 0,
list: [
{ id: 1, name: "張三", startTime: '2023-04-01 08:00:00', endTime: '2023-04-01 08:10:00' },
{ id: 2, name: "李四", startTime: '2023-04-01 08:00:00', endTime: '2023-04-01 09:00:00' },
{ id: 3, name: "王五", startTime: '2023-04-01 08:00:00', endTime: '2023-04-01 09:30:00' }
]
}
},
components: {
CountdownSon,
},
created () {
// this.gitInit()
},
methods: {
// gitInit () {
// // 從接口獲取數(shù)據(jù)并計算時間差 以time1/time2為示例
// const start = new Date(this.startTime);
// const end = new Date(this.endTime);
// // 計算時間差（毫秒）
// this.difference = end.getTime() - start.getTime();
// // 將時間差轉(zhuǎn)換為小時
// // this.timeDifference = difference / (1000 * 60 * 60)
// },
timeDifference (start, end) {
start = new Date(start);
end = new Date(end);
// 計算時間差（毫秒）
return end.getTime() - start.getTime();
}
}
};
</script>
<style>
.card {
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
2.子組件countdownSon.vue
<template>
<div>
倒計時：{{ displayTime }}
</div>
</template>
<script>
export default {
name: 'countdownSon',
data () {
return {
displayTime: null,
remainingTime: 0, // 剩余的倒計時時間绿满，單位為毫秒
timer: null // 存儲定時器的引用
};
},
props: {
difference: {
type: Number,
},
},
created () {
// 設(shè)置初始的倒計時時間為2小時
// this.remainingTime = 2 * 60 * 60 * 1000; // 2小時 x 60分鐘 x 60秒 x 1000毫秒
this.remainingTime = this.difference
this.displayTime = this.getTime(this.remainingTime)
this.startCountdown();
},
methods: {
startCountdown () {
// 設(shè)置定時器每秒更新倒計時
this.timer = setInterval(() => {
if (this.remainingTime > 0) {
this.remainingTime -= 1000; // 減少1秒
this.displayTime = this.getTime(this.remainingTime)
} else {
this.stopCountdown(); // 倒計時結(jié)束
}
}, 1000);
},
stopCountdown () {
// 清除定時器并且將其置為null
clearInterval(this.timer);
this.timer = null;
},
getTime (time) {
const hours = Math.floor(time / 3600000);
const minutes = Math.floor((time % 3600000) / 60000);
const seconds = Math.floor((time % 60000) / 1000);
return `${hours}小時${minutes}分${seconds}秒`
// 將毫秒轉(zhuǎn)為時分秒
}
},
beforeDestroy () {
// 清除定時器防止內(nèi)存泄漏
this.stopCountdown();
}
};
</script>
