vue 一个最简单的列表倒计时代码
<template>
<div>
<div v-for="(order, index) in orders" :key="index">
<p>Order ID: {{ order.id }}</p>
<p>Remaining Time: {{ formatTime(remainingTimes[index]) }}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
orders: [
{ id: 1, deadline: new Date('2022-01-01 10:00:00') },
{ id: 2, deadline: new Date('2022-01-02 15:30:00') },
],
remainingTimes: [],
timers: []
};
},
created() {
this.startTimers();
},
destroyed() {
this.clearTimers();
},
methods: {
startTimers() {
this.orders.forEach((order, index) => {
const timer = setInterval(() => {
const currentTime = new Date();
const remainingTime = order.deadline - currentTime;
this.remainingTimes.splice(index, 1, remainingTime);
}, 1000);
this.timers.push(timer);
});
},
clearTimers() {
this.timers.forEach(timer => clearInterval(timer));
},
formatTime(time) {
const seconds = Math.floor((time / 1000) % 60);
const minutes = Math.floor((time / (1000 * 60)) % 60);
const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
return `${hours}h ${minutes}m ${seconds}s`;
}
}
};
</script>
