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

news2025/7/21 1:45:27

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