使用element-ui写一个倒计时
时间: 2023-10-26 18:42:28 浏览: 51
<template>
<div class="countdown">
<el-row>
<el-col :span="8">
<div class="time">{{ days }}</div>
<div class="label">Days</div>
</el-col>
<el-col :span="8">
<div class="time">{{ hours }}</div>
<div class="label">Hours</div>
</el-col>
<el-col :span="8">
<div class="time">{{ minutes }}</div>
<div class="label">Minutes</div>
</el-col>
</el-row>
<div class="label seconds">{{ seconds }}</div>
</div>
</template>
<script>
export default {
data() {
return {
countdown: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0,
timer: null,
};
},
mounted() {
this.countdown = new Date("2022-01-01 00:00:00").getTime() - new Date().getTime();
this.startCountdown();
},
beforeDestroy() {
clearInterval(this.timer);
},
methods: {
startCountdown() {
this.timer = setInterval(() => {
this.countdown -= 1000;
this.days = Math.floor(this.countdown / (1000 * 60 * 60 * 24));
this.hours = Math.floor((this.countdown % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
this.minutes = Math.floor((this.countdown % (1000 * 60 * 60)) / (1000 * 60));
this.seconds = Math.floor((this.countdown % (1000 * 60)) / 1000);
}, 1000);
},
},
};
</script>
<style>
.countdown {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 24px;
.time {
font-size: 64px;
font-weight: bold;
margin-bottom: 8px;
}
.label {
font-size: 18px;
font-weight: bold;
text-transform: uppercase;
margin-bottom: 16px;
}
.seconds {
font-size: 32px;
font-weight: bold;
margin-top: 16px;
}
}
</style>