当前位置：首页 > article >正文

macOS 风格番茄计时器：设计与实现详解

article 2025/8/3 8:05:03

macOS 风格番茄计时器：设计与实现详解

概述

本文介绍一款采用 macOS 设计语言的网页版番茄计时器实现。该计时器完全遵循苹果的人机界面指南(HIG)，提供原汁原味的 macOS 使用体验，同时具备响应式设计和深色模式支持。

核心特性

原生 macOS UI 风格：
- 使用 San Francisco 系统字体
- 采用苹果系统配色方案
- 实现毛玻璃模糊背景效果
- 包含原生 SF Symbols 图标
完整番茄工作法功能：
- 可调节计时时长（5/10/15/25分钟）
- 开始/暂停/重置控制
- 计时结束提醒与音效
- 低时间预警（变色提示）
现代化技术实现：
- 纯前端 HTML/CSS/JavaScript 实现
- 响应式布局适配不同设备
- 支持系统的深色/浅色模式切换
- 使用 Web Audio API 生成提示音

技术实现解析

1. 界面设计

:root {--system-blue: #007AFF;--system-green: #34C759;/* 其他系统颜色定义... */
}@media (prefers-color-scheme: dark) {:root {--system-background: rgba(28, 28, 30, 0.8);/* 深色模式变量覆盖... */}
}.container {backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.1);
}

关键设计要点：

使用 CSS 变量实现主题切换
backdrop-filter 实现苹果特色的毛玻璃效果
媒体查询自动适配系统外观偏好
圆角半径与间距遵循 macOS 设计规范

2. 计时器逻辑

function updateDisplay() {const minutes = Math.floor(timeLeft / 60);const seconds = timeLeft % 60;timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;// 30秒以下变红色预警if (timeLeft <= 30) {timerDisplay.style.color = 'var(--system-red)';}
}

计时功能特点：

使用 setInterval 实现秒级更新
数字展示使用等宽字体特性 (font-variant-numeric: tabular-nums)
动态颜色变化增强时间感知
模块化设计便于功能扩展

运行界面：

2025-05-2817.36.05-ezgif.com-video-to-gif-converter

3. 系统提示音效

function playSystemSound() {const context = new AudioContext();const oscillator = context.createOscillator();// 创建三声短促提示音gainNode.gain.linearRampToValueAtTime(0.3, now + 0.1);gainNode.gain.linearRampToValueAtTime(0, now + 0.2);// ...重复三次
}