使用 Vue.js 构建倒计时器

应用场景

本代码可用于创建倒计时器，适用于需要计时或倒计时的场景，例如健身锻炼、烹饪或游戏。

基本功能

该代码实现了以下功能：

• 实时显示倒计时
• 定时器自动递减，每秒减少 1 秒
• 当倒计时结束时，显示“Next up”和下一项内容的预览

功能实现步骤及关键代码分析

1. **创建倒计时状态：**使用 Vue.js 的 ref 函数创建 count 状态，初始值为 3。

const count = ref(3);

2. **定时器递减：**使用 setInterval 函数每秒将 count 递减 1。

setInterval(() => {
  count.value--;
}, 1000);

3. **渲染倒计时：**在模板中使用 count 状态渲染实时倒计时。

<div class="text-3xl font-bold">{{ count }}</div>

4. **显示“Next up”和预览：**当 count 达到 0 时，显示“Next up”和下一项内容的预览。

<template v-if="count <= 0">
  <div class="mt-8">
    <div class="text-2xl font-bold">Next up</div>
    <div class="mt-4">
      <img
        src="https://source.unsplash.com/random/300x200"
        alt=""
        class="rounded-lg"
      />
    </div>
    <div class="mt-4 text-xl font-bold">Hollow body holds</div>
  </div>
</template>

总结与展望

经验与收获：

• 了解了 Vue.js 中使用 ref 和 setInterval 管理状态。
• 掌握了如何使用 Vue.js 构建简单的倒计时器。

未来拓展与优化：

• 添加自定义倒计时持续时间。
• 实现暂停和恢复倒计时功能。
• 集成声音或振动提醒。