vue3.js考试倒计时

以下是使用Vue.js实现考试倒计时的示例代码：

<template>
  <div>
    <p :class="time < 600 ? 'red' : time < 1200 ? 'orange' : 'cadetblue'" v-if="time !== null">
      <span>{{ days }} 天 {{ hours }} 小时 {{ minutes }} 分钟 {{ seconds }} 秒</span>
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      time: null,
      timer: null
    };
  },
  computed: {
    days() {
      return Math.floor(this.time / (24 * 60 * 60));
    },
    hours() {
      return Math.floor((this.time % (24 * 60 * 60)) / (60 * 60));
    },
    minutes() {
      return Math.floor((this.time % (60 * 60)) / 60);
    },
    seconds() {
      return Math.floor(this.time % 60);
    }
  },
  mounted() {
    const examEndTime = new Date("2022-01-01 12:00:00"); // 考试结束时间
    const maxDuration = 2 * 60 * 60; // 考试最大允许时长（单位：秒）
    const examStartTime = new Date("2022-01-01 09:00:00"); // 考试开始时间
    const currentTime = new Date(); // 当前时间

    const availableTime = Math.floor(
      (examEndTime - examStartTime) / 1000 - maxDuration
    ); // 计算可用时间（单位：秒）

    this.time = availableTime - Math.floor((currentTime - examStartTime) / 1000); // 初始化倒计时时间

    this.timer = setInterval(() => {
      this.time--;
      if (this.time <= 0) {
        clearInterval(this.timer);
      }
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

<style>
.red {
  color: red;
}
.orange {
  color: orange;
}
.cadetblue {
  color: cadetblue;
}
</style>

这段代码使用Vue.js实现了一个考试倒计时组件。根据考试结束时间、考试最大允许时长、考试开始时间和当前时间，计算出做题的可用时间，并通过定时器实现倒计时效果。