实现 计时器/倒计时 工具

分类：general ｜ 标签：计时、倒计时、秒表、时间 正计时秒表与倒计时两种模式，结束提示，适合烹饪/运动/会议

2.1 功能说明

正计时秒表与倒计时两种模式，结束提示，适合烹饪/运动/会议

2.1.1 使用指南

使用指导

支持正计时（秒表）与倒计时两种模式，倒计时结束会有提示。适合烹饪、运动、会议计时。

2.2 代码实现

2.2.1 组件结构

本工具是一个基于 Vue 3 <script setup> 语法的单文件组件（SFC），统一包裹在 ToolPageShell 组件内，由它提供页面标题、工具 ID、分类与「使用指南」插槽等通用外壳；核心业务逻辑（响应式状态、计算属性、事件处理函数）全部写在 <script setup> 中，输入/输出通过 el-input、el-button 等 Element Plus 组件与用户交互，所有数据均在浏览器本地处理，不会上传服务器。

2.2.2 核心逻辑概览

<script setup> 中定义的主要函数/方法：

• fmtTime()
• toggleUp()
• resetUp()
• totalSec()
• toggleDown()
• resetDown()
• notify()

2.2.3 关键实现代码

以下是该工具的完整 <script setup> 实现（核心代码）。模板（<template>）与样式（<style>）已省略。

import { ref, onUnmounted } from 'vue'
import ToolPageShell from '@/components/ToolPageShell.vue'

const mode = ref('up')
const upTime = ref(0)
const upRunning = ref(false)
const laps = ref([])
let upTimer = null

const h = ref(0)
const m = ref(5)
const s = ref(0)
const downRemain = ref(0)
const downRunning = ref(false)
const downDone = ref(false)
let downTimer = null

function fmtTime(sec) {
  sec = Math.max(0, Math.floor(sec))
  const hh = String(Math.floor(sec / 3600)).padStart(2, '0')
  const mm = String(Math.floor((sec % 3600) / 60)).padStart(2, '0')
  const ss = String(sec % 60).padStart(2, '0')
  return `${hh}:${mm}:${ss}`
}

function toggleUp() {
  upRunning.value = !upRunning.value
  if (upRunning.value) upTimer = setInterval(() => upTime.value++, 1000)
  else clearInterval(upTimer)
}
function resetUp() { clearInterval(upTimer); upRunning.value = false; upTime.value = 0; laps.value = [] }

function totalSec() { return h.value * 3600 + m.value * 60 + s.value }
function toggleDown() {
  if (downDone.value) { resetDown() }
  downRunning.value = !downRunning.value
  if (downRunning.value) {
    if (downRemain.value === 0) downRemain.value = totalSec()
    downTimer = setInterval(() => {
      downRemain.value--
      if (downRemain.value <= 0) {
        downRemain.value = 0
        clearInterval(downTimer)
        downRunning.value = false
        downDone.value = true
        notify()
      }
    }, 1000)
  } else clearInterval(downTimer)
}
function resetDown() { clearInterval(downTimer); downRunning.value = false; downDone.value = false; downRemain.value = totalSec() }
function notify() {
  try { new Audio('data:audio/wav;base64,UklGRl9KAABXQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YQoKAACAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIA==').play() } catch (e) {}
}

onUnmounted(() => { clearInterval(upTimer); clearInterval(downTimer) })
downRemain.value = totalSec()

2.3 效果截图

工具访问地址：https://www.i91tools.com/tools/timer