AIGC 2025-09-10 阅读: 6

AI快速编程小工具:番茄时钟

番茄时钟

图片

体验地址:https://tools.firsource.cn/tools/tomatoclock.html

提示词:

创建一个视觉精美的番茄工作法计时器网页,具有以下特点:

1. 核心功能:
   - 页面中间显示带藤蔓和叶子细节的番茄形状倒计时器,以番茄红为主色调,包含光泽和纹理效果
   - 默认工作时间25分钟,休息时间5分钟,可通过加减按钮自定义(工作时间1-60分钟,休息时间1-30分钟)
   - 具备开始/暂停按钮(点击开始后变为暂停状态,再次点击暂停)
   - 计时结束时有多重提醒:播放提示音、番茄图标震动、顶部弹出通知框显示阶段结束信息
   - 可重置计时器,恢复当前模式初始时间
   - 注意工作时间结束后自动切换到休息倒计时继续计时,休息结束自动切换回工作倒计时继续计时,交替进行

2. 附加功能:
   - 包含统计功能,显示今日已完成番茄数,数据本地保存(刷新不丢失)且每天自动重置
   - 完成一个工作时段生成一个小番茄奖励,显示在"今日收获"区域,并有浮动进入动画
   - 页面顶部显示当前日期(格式为"YYYY年MM月DD日 星期X")

3. 界面设计:
   - 布局采用番茄计时器上方显示,下方设置"今日收获"小番茄奖励区、统计卡片(显示已完成番茄数)和时间设置区域
   - 工作模式(番茄红)和休息模式(绿色)有明显视觉区分(颜色渐变、阴影变化、背景图案切换)
   - 计时器有进度环显示剩余时间比例,计时过程中番茄有脉动膨胀效果(时间越少脉动越强),最后5分钟效果增强
   - 整体为响应式布局,适配不同设备
   - 按钮有悬停和点击反馈动画
   - 背景采用渐变色搭配微妙点阵图案(工作模式为灰白渐变+番茄红点阵,休息模式为淡绿渐变+绿色点阵)

分享本文:

链接已复制到剪贴板
作者头像

管理员

博客作者 | 技术爱好者

热爱分享编程技术和经验,专注于PHP、前端开发和Web性能优化。

搜索文章