开发了一个「陪伴式倒计时」网页小工具

[HarperLucky]

大家好，感谢点击进来看～

「陪伴式倒计时」是我尝试开发海外工具网站的第二个小项目。

开发这个小项目的原因主要有 3 个：

• 我自己需要一个倒计时来辅助工作时长和专注度。
• 搜索到的倒计时工具基本满足需求，但是没有沉浸式的体验，或者说是陪伴式的体验。
• 如果网站有了一定流量，还能通过广告赚一点零花钱。

基于以上 2 点，我开发了这个小工具网站。

---

这个倒计时工具，除了能够比较便捷的设置倒计时外，还提供了：

1. 多种设置倒计时的方式：

   • 选择天、小时、分钟、秒；
   • 自定义日期和时间；
   • 自定义天数、小时数、分钟数和秒数，避免计算。

2. 可选择倒计时结束时提醒铃声，目前虽然不多，但会持续新增。

3. 可自定义倒计时标题，增加倒计时的仪式感。

4. 可选择倒计时过程中的背景动图和背景音乐（持续新增中...），这是「陪伴式」的精髓吧，也是不同于其他倒计时的最大区别，灵感来源于油管上的 Lofi 频道。

---

虽然网站已经上线了，但是还有一些 Bug 需要修复，也有一些功能需要完善，比如：

• 没有倒计时暂停功能；
• 页面更新时，背景音乐播放和按钮不一致的问题；
• 倒计时过程中，不能单独修改倒计时结束时的提醒铃声；
• 其他问题，欢迎大家补充～

下面是网站的一张截图：

再次感谢大家耐心看完帖子，希望得到大家的建议和鼓励🫶

网址： https://5minutetimer.com

[GeekGao]

不错，我在用 25min 适合番茄工作法

[HarperLucky]

@GeekGao 感谢使用呀。

番茄工作法是个好东西，我在想，是否可以加一个功能，自定义类似番茄工作法计时：

可以设置多长时间之后，休息一段时间（自定义），然后重新开始计时，依次循环。还可以设置循环几次。

[GeekGao]

@HarperLucky 个人觉得，不要做那么复杂，不如优化下你这个界面交互，更容易使用 + 再增加一些白噪声

[GeekGao]

才发现，到时间后竟然没有声音或者其他提示提醒我，算是个 bug ？

[HarperLucky]

@GeekGao 好嘞，谢谢宝贵建议啊，好像把设置按钮放在右上角，操作起来不太方便，也不太直观吧🤣，我优化一下。

这两天增加一些白噪声和大自然的声音。

[GeekGao]

@HarperLucky https://www.timerclock.net/25-seconds-timer 这家就挺简单的而且有提示音，但是就没有白噪声音乐功能。

[HarperLucky]

@GeekGao 因为默认进入页面就自动开始倒计时了，如果用户不在页面进行操作的话，浏览器默认是不会播放音乐的。

我改一下吧，初次进入倒计时页面时，需要点击才能开始倒计时，这样倒计时结束就会有提醒了。

[HarperLucky]

@GeekGao 好嘞，我学习下，感谢感谢呀～

[inostarling]

太简陋了，不够美观，也没什么沉浸感，尤其是定时器的设置我认为还有很大的改进空间

[gxy2825]

观感上页面要展示的东西太多了，或许可以精简一下？配置考虑放到二级菜单之类的

[HarperLucky]

@inostarling 感谢体验和反馈～

页面简陋的问题，我是这么想的：倒计时本身不能是个小的需求，尽量简单一些比较好，页面留白比较多，不想让页面铺满内容，给人一种压迫感。

关于「沉浸感」我是这么想的：后续增加一些白噪声和大自然的声音，大家可以选择自己喜欢的背景音乐，这样我们在倒计时的时候，可以安静的干活或者休息，让人心静下来，可能这样就有「沉浸感」了。

倒计时的设置确实不好，上面的朋友也反馈了，我正在重新布局页面。

[HarperLucky]

@gxy2825 谢谢你的体验和反馈呀。你和上面的朋友看法正好相反，楼上的朋友感觉页面太简陋了，哈哈。

页面这块，我尽量保持精简吧，按钮还是直接展示比较好，让用户少一步操作，接下来是打算把设置按钮放到倒计时下面，更直观一些，也方便大家直接操作，比如：暂停/继续，重置等。

[luckybigbear]

我对美观布局没有系统性的看法，但可以感受到页面元素的协调性确实是有些缺失
比如倒计时组件小了，和中间动态 gif 放在一起，这两个搭配的不是那么突出，没有突出主次
上面说的白噪音，我用番茄其实不太喜欢听声音，自己放的轻音乐。如果有白噪声说不定是个不错的添彩项

至于另一个评论，说什么简陋、不够美观、改进空间大，这是 boss 来评论？像是讲了很多但是又讲不清楚的，不要听这些人的意见

设计这块，可以问问设计的朋友，我第一眼看到的是协调的问题，可能色彩、布局也有其他的可以优化的

有更新我会继续看看，加油~

[HarperLucky]

@luckybigbear 你好，非常感谢你的体验和好的建议啊！

我当时的初衷是想突出 gif ，想让大家倒计时的同时，看着能让人安静下来的 gif ，听着轻音乐，快速进入专注和清静的状态。

白噪声、大自然的声音以及其他轻音乐，接下来都会不断增加，下周应该就可以增加一些。

设计这块，感谢你的建议，我找设计的朋友帮我看看，参谋参谋。在这之前，我先自己把已知的问题先修改一下，比如按钮布局等。

再次感谢你的支持和鼓励🤝

[zhangweijian]

看到你的网站让我感触很大啊，之前刚学习的时候就用 js 写了一个类似这样的和倒计时闹钟播放音乐，挺有意思的。大哥如果 github 有仓库就好了大家可以一起提 issue

[HarperLucky]

@zhangweijian 哈哈哈，原来之前也是有相同想法的同道中人。目前代码还有不少需要优化的地方，重构的地方也不少，打算好好整一下。

[ToDayMkCode]

试一下这个 https://chromewebstore.google.com/detail/helthpal/jnkkhbadiacplpihlilbgnjikcecjeno?hl=zh-CN&authuser=0 ？

[HarperLucky]

@ToDayMkCode 页面挺清爽、简洁的。这个感觉更像 TodoList 。我这个是倒计时，应用场景不太一样。

[HarperLucky]

今天更新了一个版本：
1 、删除右上角「 Set 」按钮，在右上角不方便操作。
2 、增加 [Edit] （原 Set 按钮）、「 Reset 」和「 Start/Stop 」按钮，方便操作，支持重置和暂停。

接下来解决：
1 、 [Edit] 的时候，带上当前倒计时信息，包括倒计时、闹铃等；
2 、页面更新时，背景音乐播放和按钮不一致的问题；
3 、倒计时过程中，不能单独修改倒计时结束时的提醒铃声；

感谢大家的支持和鼓励🙏

[lianhua591]

这个想法很不错呢