实现篇：手把手打造一个番茄时钟

村头的猫

已于 2025-05-06 12:44:31 修改

阅读量885

点赞数 26

分类专栏：前端技术实现文章标签： javascript 前端 html css

于 2025-05-06 12:35:50 首次发布

本文链接：https://blog.csdn.net/m0_47221837/article/details/147732027

版权

文章目录

近期文章：

实现自己的番茄时钟应用其实很容易，可以通过本实例代码也可直接轻松实现，先看效果：

完整示例代码：番茄时钟（示例来源ai-bar），实现步骤如下：

第一步：明确需求

开发一个手机端网页应用（PWA），支持番茄时钟功能。
设计风格采用苹果应用设计风格，有背景和毛玻璃效果。
提供原生应用的体验，如全屏模式、添加到主屏幕等。

第二步：拆解应用功能

番茄时钟功能：
- 计时器：25分钟工作，5分钟休息。
- 开始/暂停/重置按钮。
- 显示当前状态（工作/休息）。
毛玻璃效果：
- 背景模糊效果。
- 半透明卡片设计。
原生体验：
- 响应式设计，适配手机屏幕。
- 支持PWA（添加到主屏幕）。
- 全屏模式。
个性化设置：
- 允许用户自定义工作和休息时间。

第三步：代码实现

需要新建以下几个文件：

index.html 作为入口文件
styles.css 定义的样式文件，如背景图、图片等
script.js 交互脚本
manifest.json 这个文件描述在移动端打开，可以保存为桌面应用，需要注意的是自己准备两个图片文件作为图标，这样就可在手机端桌面看到图标。根据个人喜好 icon-192x192.png和icon-512x512.png
sw.js 用于在断网时也能打开使用

示例代码如下：

index.html 文件

应用中涉及一些图标，这里我们从lucide中引用，可免费使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="theme-color" content="#ffffff">
  <title>番茄时钟</title>
  <link rel="manifest" href="manifest.json">
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/font/lucide.css">
  <script src="https://unpkg.com/lucide@latest"></script>
</head>
<body>
  <div class="background"></div>
  <div class="container">
    <div class="card">
      <h1>番茄时钟</h1>
      <div class="timer" id="timer">25:00</div>
      <div class="status" id="status">工作</div>
      <div class="controls">
        <button id="startBtn" class="btn">
          <i class="lucide" data-lucide="play"></i>
        </button>
        <button id="pauseBtn" class="btn" disabled>
          <i class="lucide" data-lucide<