在線小鬧鐘
起因
最近買了個云服務(wù)器想搭建一個博客用來記錄，博客很快搭建好了。但是服務(wù)器資源閑著也是閑著，就在想能不能搞點(diǎn)別的小工具。覺得在線鬧鐘難度比較低，畢竟一個網(wǎng)頁就能實(shí)現(xiàn)，然后就開始鼓搗。
成品
因?yàn)閷η岸瞬涣私?，簡單?shí)現(xiàn)了功能，ui的話以后有時間再改進(jìn)。
網(wǎng)址：https://www.lingchenbox.xyz/clock/
使用
設(shè)置好時間后，點(diǎn)擊"確認(rèn)鬧鐘時間"按鈕。
鬧鐘設(shè)置好后，"鬧鐘響鈴時間"區(qū)域?qū)⒉辉偈?#34;--:--:--"，而是具體的響鈴時間。"倒計時"區(qū)域會開始倒計時。
等到設(shè)定好的鬧鈴時間后，開始播放音樂，按頁面最下方的按鈕可以停止播放。
只有保持頁面開啟才能保證功能正常運(yùn)行，退出頁面就不行了。
目前只測試了chrome和edge可以正常運(yùn)行。
視頻：https://www.bilibili.com/video/BV1aP4y117qq/
原理
html+javascript。
實(shí)現(xiàn)思路: 實(shí)現(xiàn)核心是三個標(biāo)簽。
第一個標(biāo)簽刷新當(dāng)前時間: 新建Date()對象獲取當(dāng)前時間寫進(jìn)第一個標(biāo)簽，并用定時器實(shí)時刷新。
第二個標(biāo)簽存放鬧鈴設(shè)置的時間：點(diǎn)擊"設(shè)置鬧鈴時間按鈕"后讀取設(shè)置好的時間并寫入第二個標(biāo)簽。
第三個標(biāo)簽寫倒計時時間：讀取第二個標(biāo)簽里的鬧鈴時間轉(zhuǎn)換為時間戳，再獲取當(dāng)前時間戳，相減再對"時分秒"取整，獲得h，min，s的具體數(shù)字，寫入第三個標(biāo)簽，新建一個定時器timer實(shí)時刷新，當(dāng)時間戳的差值小于0，即可播放音樂。停止timer定時器。并將標(biāo)簽二和三的內(nèi)容重置為"--:--:--"。
播放音樂：用html的audio標(biāo)簽加載音樂，加上loop="loop"屬性確保鬧鈴會循環(huán)播放。
結(jié)語
現(xiàn)在操作還是比較繁瑣，需要設(shè)置年月日時分，五個時間，而且界面ui丑的要命。但是咱水平不行，等以后有時間再優(yōu)化一下功能和界面吧。
學(xué)到的東西：js定時器的使用方法，標(biāo)簽居中的方法，如何設(shè)置按鈕觸發(fā)js事件。js的函數(shù)格式，if/else的使用方法，audio播放音樂（設(shè)置循環(huán)播放，如何暫停，再次播放從頭開始播放而不是繼續(xù)播放）
