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

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

概述

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

核心特性

1. 原生 macOS UI 风格：

   • 使用 San Francisco 系统字体
   • 采用苹果系统配色方案
   • 实现毛玻璃模糊背景效果
   • 包含原生 SF Symbols 图标

2. 完整番茄工作法功能：

   • 可调节计时时长（5/10/15/25分钟）
   • 开始/暂停/重置控制
   • 计时结束提醒与音效
   • 低时间预警（变色提示）

3. 现代化技术实现：

   • 纯前端 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)
• 动态颜色变化增强时间感知
• 模块化设计便于功能扩展

运行界面：

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);// ...重复三次
}

音效实现亮点：

• 纯代码生成，无需音频文件
• 模拟 macOS 系统提示音效
• 使用 Web Audio API 精确控制音高和时长
• 伴随视觉通知增强提醒效果

使用指南

1. 基本操作：

   • 选择所需时长（默认5分钟）
   • 点击"开始"按钮启动计时
   • 计时结束自动提醒

2. 高级功能：

   • 深色模式随系统自动切换
   • 暂停后可从当前时间恢复
   • 重置按钮恢复初始选择时长

扩展建议

1. 添加计时历史记录功能
2. 实现多阶段番茄钟（工作+休息循环）
3. 增加浏览器通知API支持
4. 添加任务完成统计功能

总结

这款采用 macOS 设计语言的番茄计时器展示了如何将系统原生设计规范应用于Web应用。通过精心设计的UI组件、流畅的交互体验和恰当的系统集成，为用户提供了接近原生应用的体验。项目代码结构清晰，便于进一步定制和功能扩展。