uniapp写一个一天的倒计时
时间: 2024-02-19 18:47:36 浏览: 63
<template>
<div class="countdown">
<div class="item">
<div class="value">{{ days }}</div>
<div class="label">天</div>
</div>
<div class="item">
<div class="value">{{ hours }}</div>
<div class="label">小时</div>
</div>
<div class="item">
<div class="value">{{ minutes }}</div>
<div class="label">分钟</div>
</div>
<div class="item">
<div class="value">{{ seconds }}</div>
<div class="label">秒</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
endTime: new Date('2021-12-31 23:59:59').getTime(),
days: '',
hours: '',
minutes: '',
seconds: ''
}
},
mounted() {
setInterval(() => {
const nowTime = new Date().getTime();
const remainingTime = this.endTime - nowTime;
this.days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
this.hours = Math.floor((remainingTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
this.minutes = Math.floor((remainingTime % (1000 * 60 * 60)) / (1000 * 60));
this.seconds = Math.floor((remainingTime % (1000 * 60)) / 1000);
}, 1000);
}
}
</script>
<style>
.countdown {
display: flex;
justify-content: center;
align-items: center;
font-size: 3rem;
font-weight: bold;
}
.item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 1rem;
}
.value {
color: red;
}
</style>
阅读全文