【页面案例汇总】微信小程序考试倒计时页面

1. 在pages目录下创建一个countdown目录，用于存放考试倒计时页面相关的文件。

2. 在countdown目录下创建一个countdown.vue文件，用于编写考试倒计时页面的代码。

3. 在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>

4. 在App.vue文件中添加如下代码，将考试倒计时页面作为应用的默认首页：

<template>
  <view>
    <countdown />
  </view>
</template>

<script>
import countdown from './pages/countdown/countdown.vue'

export default {
  components: {
    countdown
  }
}
</script>

5. 运行应用，即可看到考试倒计时页面的效果。

在这个示例中，我们通过获取当前时间和考试结束时间之间的时间差，并不断更新倒计时显示内容，实现了考试倒计时页面的功能。稍加修改，也可以适应其他倒计时应用的需求。