发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

使用Vue3实现倒计时器及倒计时任务的完整代码

勇者如龙

6

主题

6

帖子

18

积分

新手上路

Rank: 1

积分
18
显示全部楼层
  1. 本内容使用Vue3，以及element-plus辅助开发。
复制代码
  1. 首先展示倒计时器的功能：
  2. <ul><li>手动设置倒计时器的倒计时时间</li><li>开始倒计时按钮</li><li>暂停倒计时按钮</li><li>重新开始倒计时按钮</li></ul>
复制代码
  1.  其次展示倒计时任务管理界面功能：创建倒计时任务选择任务并进行倒计时删除任务
复制代码


一.倒计时器：
  1. 最后面会附有完整代码，可直接CV。 
复制代码


1.html：
  1. 使用element-plus下拉框组件选择设置的时分秒的时间，点击确定按钮就可以将设置的时间在formattedTime显示，随后使用操作按钮进行对计时器的操作。 
复制代码
  1. <el-card>
  2.     <h2>倒计时器</h2>
  3.     <!-- 倒计时时间选择框 -->
  4.     <div>
  5.         <el-form inline>
  6.             <!-- 小时选择器 -->
  7.             <el-form-item label="小时：">
  8.                 <el-select v-model="selectedHours" :disabled="isRunning" placeholder="选择小时" style="width: 100px;">
  9.                     <el-option v-for="h in 24" :key="'h' + h" :label="h - 1" :value="h - 1"/>
  10.                 </el-select>
  11.             </el-form-item>
  12.             <!-- 分钟选择器 -->
  13.             <el-form-item label="分钟：">
  14.                 <el-select v-model="selectedMinutes" :disabled="isRunning" placeholder="选择分钟" style="width: 100px;">
  15.                 <el-option v-for="m in 60" :key="'m' + m" :label="m - 1" :value="m - 1"/>
  16.                 </el-select>
  17.             </el-form-item>
  18.             <!-- 秒选择器 -->
  19.             <el-form-item label="秒：">
  20.                 <el-select v-model="selectedSeconds" :disabled="isRunning" placeholder="选择秒" style="width: 100px;">
  21.                 <el-option v-for="s in 60" :key="'s' + s" :label="s - 1" :value="s - 1"/>
  22.                 </el-select>
  23.             </el-form-item>
  24.         </el-form>
  25.         <el-button type="info" @click="getTrue()">确定</el-button>
  26.     </div>                  
  27.     <!-- 倒计时显示 -->
  28.     <div class="timer-display">
  29.         <h1>{{ formattedTime }}</h1>
  30.     </div>
  31.     <!-- 操作按钮 -->
  32.     <div class="controls">
  33.         <!-- 倒计时器 -->
  34.         <el-button type="success" @click="startCountdown()" :disabled="isRunning">开始</el-button>
  35.         <el-button type="warning" @click="pauseCountdown()" :disabled="!isRunning">暂停</el-button>
  36.         <el-button type="primary" @click="restartCountdown()">重新开始</el-button>
  37.         <el-button type="info" @click="nextProcess()">下一阶段</el-button>
  38.     </div>
  39. </el-card>
复制代码
2.script：

（1）状态变量：
  1. // 选择的倒计时初始值
  2. const selectedHours = ref(0);
  3. const selectedMinutes = ref(0);
  4. const selectedSeconds = ref(0);
  5. // 当前剩余的倒计时时间，以秒为单位动态更新
  6. const totalSeconds = ref(0);
  7. // 表示倒计时是否正在运行，用来防止重复启动计时器
  8. const isRunning = ref(false);
  9. // 存储定时器的句柄，用于管理 setInterval
  10. let timer = null;
复制代码
（2）格式化显示时间：
  1. // computed：这是一个计算属性，动态计算剩余时间的格式化显示。
  2. const formattedTime = computed(() => {
  3.     const hours = Math.floor(totalSeconds.value / 3600);
  4.     const minutes = Math.floor((totalSeconds.value % 3600) / 60);
  5.     const seconds = totalSeconds.value % 60;
  6.     // 返回格式用于倒计时器的显示 hh:mm:ss
  7.     return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  8. });
复制代码
  1. <strong>格式化逻辑</strong>：
复制代码

  • 小时：
    1. Math.floor(totalSeconds.value / 3600)
    复制代码
    ，将总秒数除以3600得到小时数（向下取整）。
  • 分钟：取余后计算分钟数：
    1. Math.floor((totalSeconds.value % 3600) / 60)
    复制代码
    。
  • 秒数：取余后直接取
    1. totalSeconds.value % 60
    复制代码
    。
  • 格式化：使用
    1. padStart(2, '0')
    复制代码
    保证个位数前补
    1. 0
    复制代码
    ，显示为两位数。
（3）初始化倒计时：
  1. // 将计算结果赋值给 totalSeconds，作为倒计时的起始值。
  2. const initializeCountdown = () => {
  3.     totalSeconds.value = selectedHours.value * 3600 + selectedMinutes.value * 60 + selectedSeconds.value;
  4. };
复制代码
（4）开始按钮startCountdown -> 启动倒计时器：
  1. const startCountdown = () => {
  2.     if (totalSeconds.value === 0) {
  3.         initializeCountdown(); // 如果总秒数为0，重新初始化
  4.     }
  5.     // 通过 isRunning 确保倒计时只能启动一次
  6.     if (!isRunning.value) {
  7.         isRunning.value = true;
  8.         // 使用 setInterval 每秒执行一次回调
  9.         timer = setInterval(() => {
  10.             if (totalSeconds.value > 0) {
  11.                 totalSeconds.value -= 1; // 每秒减1
  12.             } else {
  13.                 // 调用 pauseCountdown 停止计时器
  14.                 pauseCountdown();
  15.             }
  16.         }, 1000);
  17.     }
  18. };
复制代码
（5）暂停按钮pauseCountdown -> 暂停倒计时器：
  1. const pauseCountdown = () => {
  2.     // 将 isRunning 设置为 false，标记倒计时暂停
  3.     isRunning.value = false;
  4.     // 如果计时器已存在（timer 不为 null），调用 clearInterval 停止计时器，并将 timer 置空
  5.     if (timer) {
  6.         clearInterval(timer);
  7.         timer = null;
  8.     }
  9. };
复制代码
（6）重启倒计时器restartCountdown -> 重新开始倒计时：
  1. const restartCountdown = () => {
  2.     // 停止当前计时器
  3.     pauseCountdown();
  4.     // 重置 totalSeconds 为初始值
  5.     initializeCountdown();
  6.     // 重新启动倒计时
  7.     startCountdown();
  8. };
复制代码
（7）确定按钮 -> 修改倒计时时间：
  1. // 停止当前计时器，重新计算并设置倒计时总秒数
  2. const getTrue = () => {
  3.     pauseCountdown();
  4.     initializeCountdown();
  5. };
复制代码
（8）页面卸载时清理计时器（onUnMounted）：
  1. // 当组件卸载时触发
  2. onUnmounted(() => {
  3.     // 清理计时器，防止内存泄漏
  4.     if (timer) {
  5.         clearInterval(timer);
  6.     }
  7. });
复制代码
3.css：
  1. <style lang="css" scoped>
  2. .countdown-timer {
  3.     text-align: center;
  4.     font-family: Arial, sans-serif;
  5. }
  6. .timer-display h1 {
  7.     font-size: 48px;
  8.     margin: 20px 0;
  9. }
  10. .controls button {
  11.     margin: 5px;
  12.     padding: 10px 20px;
  13.     font-size: 16px;
  14. }
  15. select {
  16.     margin: 5px;
  17.     padding: 5px;
  18. }
  19. </style>
复制代码
二.倒计时任务管理界面：
  1. 通过弹窗填写任务名称和时间（时、分、秒），并将任务提交到任务列表中。 
复制代码
1.html：
  1. <el-card>
  2.     <!-- 倒计时时间选择框 -->
  3.     <el-button type="primary" @click="addTaskDialog()">创建任务</el-button>
  4.     <!-- 任务队列 -->
  5.     <h3>任务队列</h3>
  6.     <el-table :data="timeTaskData" style="width: 100%" height="250">
  7.         <el-table-column prop="name" label="任务名称" width="120" />
  8.         <el-table-column prop="time" label="倒计时间" width="120" />
  9.         <el-table-column label="操作" width="100">
  10.             <template #default="{ row }">
  11.                 <el-button type="success" @click="setCountdownTime(row)" :icon="Check" circle />
  12.                 <el-button type="danger" @click="deleteTimeTask(row)" :icon="Delete" circle />
  13.             </template>
  14.         </el-table-column>
  15.     </el-table>
  16. </el-card>
  17. <!-- 任务创建弹窗 -->
  18. <el-dialog v-model="taskDialogVisible" title="创建新任务" width="500" draggable>
  19.     <el-form>
  20.         <el-form-item label="任务名称">
  21.             <el-input v-model="newTask.name" placeholder="请输入任务名称" />
  22.         </el-form-item>
  23.         <el-form-item label="小时">
  24.             <el-select v-model="newTask.hours" placeholder="选择小时">
  25.                 <el-option :key="'h0'" :label="0" :value="0" /> <!-- 手动添加 0 -->
  26.                 <el-option v-for="h in 24" :key="'h' + h" :label="h" :value="h" />
  27.             </el-select>
  28.         </el-form-item>
  29.         <el-form-item label="分钟">
  30.             <el-select v-model="newTask.minutes" placeholder="选择分钟">
  31.                 <el-option :key="'m0'" :label="0" :value="0" /> <!-- 手动添加 0 -->
  32.                 <el-option v-for="m in 60" :key="'m' + m" :label="m" :value="m" />
  33.             </el-select>
  34.         </el-form-item>
  35.         <el-form-item label="秒">
  36.             <el-select v-model="newTask.seconds" placeholder="选择秒">
  37.                 <el-option :key="'s0'" :label="0" :value="0" /> <!-- 手动添加 0 -->
  38.                 <el-option v-for="s in 60" :key="'s' + s" :label="s" :value="s" />
  39.             </el-select>
  40.         </el-form-item>
  41.     </el-form>
  42.     <template #footer>
  43.         <div class="dialog-footer">
  44.             <el-button @click="taskDialogVisible = false">取消</el-button>
  45.             <el-button type="primary" @click="addTimeTask()">创建任务</el-button>
  46.         </div>
  47.     </template>
  48. </el-dialog>
复制代码

2.script：
  1. // 用于控制弹窗的显示和隐藏状态
  2. const taskDialogVisible = ref(false);
  3. // 打开弹窗
  4. const addTaskDialog = () =>{
  5.     taskDialogVisible.value = true;
  6.     console.log('弹窗状态:', taskDialogVisible.value); // 调试日志
  7. }
  8. // 用于绑定用户输入的任务数据
  9. const newTask = reactive({
  10.     name: '', // 任务名称
  11.     // 用户输入的时、分、秒，表示任务的时间
  12.     hours: '',
  13.     minutes: '',
  14.     seconds: ''
  15. })
  16. // 任务列表
  17. const timeTaskData = ref([]);
  18. const timeTask = reactive({
  19.     name: "",
  20.     time: null, // 任务时间，格式为 HH:mm:ss
  21.     roomGroup : ""
  22. });
  23. // 清空 timeTask 中的任务数据
  24. const cleantimeRask = () =>{
  25.     timeTask.value = {
  26.         name: "",
  27.         time: null,
  28.         roomGroup : ""
  29.     };
  30. }
  31. const addTimeTask = async () =>{
  32.     taskDialogVisible.value = false;
  33.     // 使用用户输入的时、分、秒来设置时间
  34.     const hours = parseInt(newTask.hours) || 0;
  35.     const minutes = parseInt(newTask.minutes) || 0;
  36.     const seconds = parseInt(newTask.seconds) || 0;
  37.     // 将时间合并为 HH:mm:ss 格式
  38.     const timeString = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  39.     // 设置任务数据
  40.     timeTask.time = timeString; // 使用标准的 HH:mm:ss 格式
  41.     // 从 userStore 获取当前用户的分组
  42.     timeTask.roomGroup = userStore.user.roomGroup;
  43.     timeTask.name = newTask.name;
  44.     if (timeTask.name !== '' && timeTask.time !== '') {
  45.         await insertTimeTask(timeTask); // 插入任务（异步操作）
  46.         ElMessage.success("任务添加成功");
  47.         getTimeTaskByRGToShow(); // 更新任务列表
  48.         console.log(timeTaskData.value);
  49.         cleantimeRask(); // 清空当前任务数据
  50.     } else {
  51.         ElMessage.error("任务名称或时间不能为空");
  52.     }
  53. }
  54. // 设置倒计时的时、分、秒
  55. const setCountdownTime = (row) => {
  56.     let date;
  57.     if (row.time instanceof Date) {
  58.         date = row.time; // 如果是 Date 对象，直接赋值
  59.     } else if (typeof row.time === "string") {
  60.         const [hours, minutes, seconds] = row.time.split(":").map(Number); // 按 HH:mm:ss 分割
  61.         date = new Date(); // 使用当前日期
  62.         date.setHours(hours, minutes, seconds); // 设置时间
  63.     } else {
  64.         console.error("无效的时间格式");
  65.         return;
  66.     }
  67.     selectedHours.value = date.getHours();      // 获取小时
  68.     selectedMinutes.value = date.getMinutes();  // 获取分钟
  69.     selectedSeconds.value = date.getSeconds();  // 获取秒数
  70.     initializeCountdown(); // 更新总时间
  71. };
  72. // 删除倒计时的任务
  73. const deleteTimeTask = async (row) =>{
  74.     await deleteTimeTaskById(row.id);
  75.     ElMessage.success("任务删除成功");
  76.     getTimeTaskByRGToShow();
  77.     console.log(timeTaskData.value);
  78. };
  79. // 根据组别获取所有任务信息
  80. const getTimeTaskByRGToShow = async () =>{
  81.     let roomGroup = userStore.user.roomGroup;
  82.     let result = await getTimeTaskByRG(roomGroup);
  83.     timeTaskData.value = result.data;
  84. }
  85. getTimeTaskByRGToShow();
复制代码
三.倒计时器完整代码展示：

1.html：
  1. <el-main style="background-color:darkgray">
  2.     <div>
  3.         <el-card>
  4.             <!-- 倒计时时间选择框 -->
  5.             <el-button type="primary" @click="addTaskDialog()">创建任务</el-button>
  6.             <!-- 任务队列 -->
  7.             <h3>任务队列</h3>
  8.             <el-table :data="timeTaskData" style="width: 100%" height="250">
  9.                 <el-table-column prop="name" label="任务名称" width="120" />
  10.                 <el-table-column prop="time" label="倒计时间" width="120" />
  11.                 <el-table-column label="操作" width="100">
  12.                     <template #default="{ row }">
  13.                         <el-button type="success" @click="setCountdownTime(row)" :icon="Check" circle />
  14.                         <el-button type="danger" @click="deleteTimeTask(row)" :icon="Delete" circle />
  15.                     <!-- <el-button type="success" >开始倒计时</el-button> -->
  16.                     </template>
  17.                 </el-table-column>
  18.             </el-table>
  19.         </el-card>
  20.     </div>
  21.     <div class="countdown-timer">
  22.         <el-card>
  23.             <h2>倒计时器</h2>
  24.             <!-- 倒计时时间选择框 -->
  25.             <div>
  26.                 <el-form inline>
  27.                     <!-- 小时选择器 -->
  28.                     <el-form-item label="小时：">
  29.                         <el-select v-model="selectedHours" :disabled="isRunning" placeholder="选择小时" style="width: 100px;">
  30.                             <el-option v-for="h in 24" :key="'h' + h" :label="h - 1" :value="h - 1"/>
  31.                         </el-select>
  32.                     </el-form-item>
  33.                     <!-- 分钟选择器 -->
  34.                     <el-form-item label="分钟：">
  35.                         <el-select v-model="selectedMinutes" :disabled="isRunning" placeholder="选择分钟" style="width: 100px;">
  36.                         <el-option v-for="m in 60" :key="'m' + m" :label="m - 1" :value="m - 1"/>
  37.                         </el-select>
  38.                     </el-form-item>
  39.                     <!-- 秒选择器 -->
  40.                     <el-form-item label="秒：">
  41.                         <el-select v-model="selectedSeconds" :disabled="isRunning" placeholder="选择秒" style="width: 100px;">
  42.                         <el-option v-for="s in 60" :key="'s' + s" :label="s - 1" :value="s - 1"/>
  43.                         </el-select>
  44.                     </el-form-item>
  45.                 </el-form>
  46.                 <el-button type="info" @click="getTrue()">确定</el-button>
  47.             </div>                  
  48.             <!-- 倒计时显示 -->
  49.             <div class="timer-display">
  50.                 <h1>{{ formattedTime }}</h1>
  51.             </div>
  52.             <!-- 操作按钮 -->
  53.             <div class="controls">
  54.                 <!-- 倒计时器 -->
  55.                 <el-button type="success" @click="startCountdown()" :disabled="isRunning">开始</el-button>
  56.                 <el-button type="warning" @click="pauseCountdown()" :disabled="!isRunning">暂停</el-button>
  57.                 <el-button type="primary" @click="restartCountdown()">重新开始</el-button>
  58.                 <el-button type="info" @click="nextProcess()">下一阶段</el-button>
  59.             </div>
  60.         </el-card>
  61.     </div>
  62. </el-main>
  63. <!-- 任务创建弹窗 -->
  64. <el-dialog v-model="taskDialogVisible" title="创建新任务" width="500" draggable>
  65.     <el-form>
  66.         <el-form-item label="任务名称">
  67.             <el-input v-model="newTask.name" placeholder="请输入任务名称" />
  68.         </el-form-item>
  69.         <el-form-item label="小时">
  70.             <el-select v-model="newTask.hours" placeholder="选择小时">
  71.                 <el-option :key="'h0'" :label="0" :value="0" /> <!-- 手动添加 0 -->
  72.                 <el-option v-for="h in 24" :key="'h' + h" :label="h" :value="h" />
  73.             </el-select>
  74.         </el-form-item>
  75.         <el-form-item label="分钟">
  76.             <el-select v-model="newTask.minutes" placeholder="选择分钟">
  77.                 <el-option :key="'m0'" :label="0" :value="0" /> <!-- 手动添加 0 -->
  78.                 <el-option v-for="m in 60" :key="'m' + m" :label="m" :value="m" />
  79.             </el-select>
  80.         </el-form-item>
  81.         <el-form-item label="秒">
  82.             <el-select v-model="newTask.seconds" placeholder="选择秒">
  83.                 <el-option :key="'s0'" :label="0" :value="0" /> <!-- 手动添加 0 -->
  84.                 <el-option v-for="s in 60" :key="'s' + s" :label="s" :value="s" />
  85.             </el-select>
  86.         </el-form-item>
  87.     </el-form>
  88.     <template #footer>
  89.         <div class="dialog-footer">
  90.             <el-button @click="taskDialogVisible = false">取消</el-button>
  91.             <el-button type="primary" @click="addTimeTask()">创建任务</el-button>
  92.         </div>
  93.     </template>
  94. </el-dialog>
复制代码
2.script：
  1. <script setup>
  2. import { reactive, ref, computed, onUnmounted } from 'vue';
  3. import {  Check,Delete,Star } from '@element-plus/icons-vue';
  4. import { getCpByRG, insertByRG } from '@/api/competition';
  5. import { getTimeTaskByRG,insertTimeTask,deleteTimeTaskById } from '@/api/timetask';
  6. import { useUserStore } from '@/stores/user';
  7. import { ElMessage } from 'element-plus';
  8. const userStore = useUserStore();
  9. // 弹窗组件
  10. const taskDialogVisible = ref(false);
  11. const addTaskDialog = () =>{
  12.     taskDialogVisible.value = true;
  13.     console.log('弹窗状态:', taskDialogVisible.value); // 调试日志
  14. }
  15. const newTask = reactive({
  16.     name: '',
  17.     hours: '',
  18.     minutes: '',
  19.     seconds: ''
  20. })
  21. const timeTaskData = ref([]);
  22. const timeTask = reactive({
  23.     name: "",
  24.     time: null,
  25.     roomGroup : ""
  26. });
  27. const cleantimeRask = () =>{
  28.     timeTask.value = {
  29.         name: "",
  30.         time: null,
  31.         roomGroup : ""
  32.     };
  33. }
  34. const addTimeTask = async () =>{
  35.     taskDialogVisible.value = false;
  36.     // 用用户输入的时、分、秒来设置时间
  37.     const hours = parseInt(newTask.hours) || 0;
  38.     const minutes = parseInt(newTask.minutes) || 0;
  39.     const seconds = parseInt(newTask.seconds) || 0;
  40.     // 将时间合并为 HH:mm:ss 格式
  41.     const timeString = `${String(hours).padStart(2, "0")}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
  42.     // 设置任务数据
  43.     timeTask.time = timeString; // 使用标准的 HH:mm:ss 格式
  44.     timeTask.roomGroup = userStore.user.roomGroup;
  45.     timeTask.name = newTask.name;
  46.     if (timeTask.name !== '' && timeTask.time !== '') {
  47.         await insertTimeTask(timeTask);
  48.         ElMessage.success("任务添加成功");
  49.         getTimeTaskByRGToShow();
  50.         console.log(timeTaskData.value);
  51.         cleantimeRask();
  52.     } else {
  53.         ElMessage.error("任务名称或时间不能为空");
  54.     }
  55. }
  56. // 设置倒计时的时、分、秒
  57. const setCountdownTime = (row) => {
  58.     let date;
  59.     if (row.time instanceof Date) {
  60.         date = row.time; // 如果是 Date 对象，直接赋值
  61.     } else if (typeof row.time === "string") {
  62.         const [hours, minutes, seconds] = row.time.split(":").map(Number); // 按 HH:mm:ss 分割
  63.         date = new Date(); // 使用当前日期
  64.         date.setHours(hours, minutes, seconds); // 设置时间
  65.     } else {
  66.         console.error("无效的时间格式");
  67.         return;
  68.     }
  69.     selectedHours.value = date.getHours();      // 获取小时
  70.     selectedMinutes.value = date.getMinutes();  // 获取分钟
  71.     selectedSeconds.value = date.getSeconds();  // 获取秒数
  72.     initializeCountdown(); // 更新总时间
  73. };
  74. // 删除倒计时的任务
  75. const deleteTimeTask = async (row) =>{
  76.     await deleteTimeTaskById(row.id);
  77.     ElMessage.success("任务删除成功");
  78.     getTimeTaskByRGToShow();
  79.     console.log(timeTaskData.value);
  80. };
  81. // 根据组别获取所有任务信息
  82. const getTimeTaskByRGToShow = async () =>{
  83.     let roomGroup = userStore.user.roomGroup;
  84.     let result = await getTimeTaskByRG(roomGroup);
  85.     timeTaskData.value = result.data;
  86. }
  87. getTimeTaskByRGToShow();
  88. /
  89. // 倒计时器
  90. // 选择的倒计时初始值
  91. const selectedHours = ref(0);
  92. const selectedMinutes = ref(0);
  93. const selectedSeconds = ref(0);
  94. // 当前倒计时时间（以秒为单位）
  95. const totalSeconds = ref(0);
  96. const isRunning = ref(false);
  97. let timer = null;
  98. // 格式化显示的时间
  99. const formattedTime = computed(() => {
  100.     const hours = Math.floor(totalSeconds.value / 3600);
  101.     const minutes = Math.floor((totalSeconds.value % 3600) / 60);
  102.     const seconds = totalSeconds.value % 60;
  103.     return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
  104. });
  105. // 初始化倒计时
  106. const initializeCountdown = () => {
  107.     totalSeconds.value = selectedHours.value * 3600 + selectedMinutes.value * 60 + selectedSeconds.value;
  108. };
  109. // 开始倒计时
  110. const startCountdown = () => {
  111.     // 如果当前总秒数为 0，自动初始化倒计时
  112.     if (totalSeconds.value === 0) {
  113.         initializeCountdown();
  114.     }
  115.     if (!isRunning.value) {
  116.         isRunning.value = true;
  117.         playSound('start'); // 播放开始音效
  118.         timer = setInterval(() => {
  119.             if (totalSeconds.value > 0) {
  120.                 totalSeconds.value -= 1;
  121.             } else {
  122.                 pauseCountdown();
  123.                 playSound('end'); // 倒计时结束时播放音效
  124.             }
  125.         }, 1000);
  126.     }
  127. };
  128. // 暂停倒计时
  129. const pauseCountdown = () => {
  130.     isRunning.value = false;
  131.     playSound('pause'); // 播放暂停音效
  132.     if (timer) {
  133.         clearInterval(timer);
  134.         timer = null;
  135.     }
  136. };
  137. // 重新开始倒计时
  138. const restartCountdown = () => {
  139.     pauseCountdown();
  140.     initializeCountdown();
  141.     playSound('reset'); // 播放重置音效
  142.     startCountdown();
  143. };
  144. // 确定修改倒计时时间
  145. const getTrue = () => {
  146.     pauseCountdown();
  147.     initializeCountdown();
  148. };
  149. // 页面卸载时清理计时器
  150. onUnmounted(() => {
  151.     if (timer) {
  152.     clearInterval(timer);
  153.     }
  154. });
  155. </script>
复制代码
3.css：
  1. <style lang="css" scoped>
  2. .countdown-timer {
  3.     text-align: center;
  4.     font-family: Arial, sans-serif;
  5. }
  6. .timer-display h1 {
  7.     font-size: 48px;
  8.     margin: 20px 0;
  9. }
  10. .controls button {
  11.     margin: 5px;
  12.     padding: 10px 20px;
  13.     font-size: 16px;
  14. }
  15. select {
  16.     margin: 5px;
  17.     padding: 5px;
  18. }
  19. </style>
复制代码
到此这篇关于使用Vue3来实现一个倒计时器以及倒计时任务的文章就介绍到这了,更多相关vue3倒计时内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/331244l91.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: Vue中ref、computed与reactive使用频率现象分析(示例详解)

下一篇: React中如何使用echarts写出3d旋转扇形图

发表于 2024-11-26 01:21:43

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4