【页面案例汇总】微信小程序考试倒计时页面
在这个示例中,我们通过获取当前时间和考试结束时间之间的时间差,并不断更新倒计时显示内容,实现了考试倒计时页面的功能。稍加修改,也可以适应其他倒计时应用的需求。在countdown目录下创建一个countdown.vue文件,用于编写考试倒计时页面的代码。在pages目录下创建一个countdown目录,用于存放考试倒计时页面相关的文件。// 获取并设置倒计时时间。// 销毁倒计时计时器。// 更新
·
-
在pages目录下创建一个countdown目录,用于存放考试倒计时页面相关的文件。
-
在countdown目录下创建一个countdown.vue文件,用于编写考试倒计时页面的代码。
-
在countdown.vue文件中添加如下代码:
<template>
<div class="container">
<div class="countdown">
<div class="countdown-item">
<div class="countdown-value">{{ days }}</div>
<div class="countdown-label">Days</div>
</div>
<div class="countdown-item">
<div class="countdown-value">{{ hours }}</div>
<div class="countdown-label">Hours</div>
</div>
<div class="countdown-item">
<div class="countdown-value">{{ minutes }}</div>
<div class="countdown-label">Minutes</div>
</div>
<div class="countdown-item">
<div class="countdown-value">{{ seconds }}</div>
<div class="countdown-label">Seconds</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
endTime: new Date('2022-01-01 08:00:00').getTime(), // 考试结束时间
currentTime: new Date().getTime(), // 当前时间
countdownTimer: null, // 倒计时计时器
days: 0,
hours: 0,
minutes: 0,
seconds: 0
}
},
mounted() {
// 获取并设置倒计时时间
this.updateCountdown()
// 开始倒计时
this.countdownTimer = setInterval(() => {
this.updateCountdown()
}, 1000)
},
beforeDestroy() {
// 销毁倒计时计时器
clearInterval(this.countdownTimer)
},
methods: {
// 更新倒计时时间
updateCountdown() {
let diffTime = Math.max(this.endTime - this.currentTime, 0) // 时间差
this.days = Math.floor(diffTime / (1000 * 60 * 60 * 24))
this.hours = Math.floor((diffTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
this.minutes = Math.floor((diffTime % (1000 * 60 * 60)) / (1000 * 60))
this.seconds = Math.floor((diffTime % (1000 * 60)) / 1000)
// 更新当前时间
this.currentTime = new Date().getTime()
}
}
}
</script>
<style scoped>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.countdown {
display: flex;
}
.countdown-item {
display: flex;
flex-direction: column;
align-items: center;
margin-right: 10px;
font-size: 24px;
color: #333;
}
.countdown-value {
font-weight: bold;
}
.countdown-label {
font-size: 12px;
}
</style>
- 在App.vue文件中添加如下代码,将考试倒计时页面作为应用的默认首页:
<template>
<view>
<countdown />
</view>
</template>
<script>
import countdown from './pages/countdown/countdown.vue'
export default {
components: {
countdown
}
}
</script>
- 运行应用,即可看到考试倒计时页面的效果。
在这个示例中,我们通过获取当前时间和考试结束时间之间的时间差,并不断更新倒计时显示内容,实现了考试倒计时页面的功能。稍加修改,也可以适应其他倒计时应用的需求。
更多推荐
已为社区贡献2条内容
所有评论(0)