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();
// 将时间差转换为小时
// 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 () {
// // 从接口获取数据并计算时间差 以time1/time2为示例
// const start = new Date(this.startTime);
// const end = new Date(this.endTime);
// // 计算时间差（毫秒）
// this.difference = end.getTime() - start.getTime();
// // 将时间差转换为小时
// // 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 () {
// 设置初始的倒计时时间为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 () {
// 设置定时器每秒更新倒计时
this.timer = setInterval(() => {
if (this.remainingTime > 0) {
this.remainingTime -= 1000; // 减少1秒
this.displayTime = this.getTime(this.remainingTime)
} else {
this.stopCountdown(); // 倒计时结束
}
}, 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}秒`
// 将毫秒转为时分秒
}
},
beforeDestroy () {
// 清除定时器防止内存泄漏
this.stopCountdown();
}
};
</script>
