起因

最近买了个云服务器想搭建一个博客用来记录，博客很快搭建好了。但是服务器资源闲着也是闲着，就在想能不能搞点别的小工具。觉得在线闹钟难度比较低，毕竟一个网页就能实现，然后就开始鼓捣。

成品

因为对前端不了解，简单实现了功能，ui的话以后有时间再改进。

网址：https://www.lingchenbox.xyz/clock/

使用

1. 设置好时间后，点击"确认闹钟时间"按钮。

2. 闹钟设置好后，"闹钟响铃时间"区域将不再是"--:--:--"，而是具体的响铃时间。"倒计时"区域会开始倒计时。

3. 等到设定好的闹铃时间后，开始播放音乐，按页面最下方的按钮可以停止播放。

4. 只有保持页面开启才能保证功能正常运行，退出页面就不行了。

5. 目前只测试了chrome和edge可以正常运行。
   视频：https://www.bilibili.com/video/BV1aP4y117qq/

原理

html+javascript。

实现思路: 实现核心是三个标签。

第一个标签刷新当前时间: 新建Date()对象获取当前时间写进第一个标签，并用定时器实时刷新。

第二个标签存放闹铃设置的时间：点击"设置闹铃时间按钮"后读取设置好的时间并写入第二个标签。

第三个标签写倒计时时间：读取第二个标签里的闹铃时间转换为时间戳，再获取当前时间戳，相减再对"时分秒"取整，获得h，min，s的具体数字，写入第三个标签，新建一个定时器timer实时刷新，当时间戳的差值小于0，即可播放音乐。停止timer定时器。并将标签二和三的内容重置为"--:--:--"。

播放音乐：用html的audio标签加载音乐，加上loop="loop"属性确保闹铃会循环播放。

结语

现在操作还是比较繁琐，需要设置年月日时分，五个时间，而且界面ui丑的要命。但是咱水平不行，等以后有时间再优化一下功能和界面吧。

学到的东西：js定时器的使用方法，标签居中的方法，如何设置按钮触发js事件。js的函数格式，if/else的使用方法，audio播放音乐（设置循环播放，如何暂停，再次播放从头开始播放而不是继续播放）