最近买了个云服务器想搭建一个博客用来记录,博客很快搭建好了。但是服务器资源闲着也是闲着,就在想能不能搞点别的小工具。觉得在线闹钟难度比较低,毕竟一个网页就能实现,然后就开始鼓捣。
因为对前端不了解,简单实现了功能,ui的话以后有时间再改进。
网址:https://www.lingchenbox.xyz/clock/
设置好时间后,点击"确认闹钟时间"按钮。
闹钟设置好后,"闹钟响铃时间"区域将不再是"--:--:--",而是具体的响铃时间。"倒计时"区域会开始倒计时。
等到设定好的闹铃时间后,开始播放音乐,按页面最下方的按钮可以停止播放。
只有保持页面开启才能保证功能正常运行,退出页面就不行了。
目前只测试了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播放音乐(设置循环播放,如何暂停,再次播放从头开始播放而不是继续播放)
「艾尔登法环」梅琳娜手办开订 立体手办▪
万代「艾尔登法环」白狼战鬼手办开订 立体手办▪
「夏目友人帐」猫咪老师粘土人开订 立体手办▪
「五等分的新娘∬」中野三玖·白无垢版手办开订 立体手办▪
「海贼王」乌索普Q版手办开订 立体手办▪
良笑社「初音未来」新手办开订 立体手办▪
「黑岩射手DAWN FALL」死亡主宰手办开订 立体手办▪
「盾之勇者成名录」菲洛手办登场 立体手办▪
「魔法少女小圆」美树沙耶香手办开订 立体手办▪
「咒术回战」七海建人粘土人登场 立体手办▪
「五等分的新娘」中野二乃白无垢手办开订 立体手办▪
「为美好的世界献上祝福!」芸芸粘土人开订 立体手办▪
「公主连结 与你重逢」六星可可萝手办开订 立体手办▪
「女神异闻录5」Joker雨宫莲手办开订 立体手办▪
「间谍过家家」约尔・福杰粘土人登场 立体手办▪
「街角魔族 2丁目」吉田优子手办开订 立体手办▪
「火影忍者 疾风传」旗木卡卡西·暗部版粘土人登场 立体手办▪
「佐佐木与宫野」宫野由美粘土人开订 立体手办▪
「盾之勇者成名录」第2季拉芙塔莉雅手办开订 立体手办▪
「咒术回战」两面宿傩Q版坐姿手办开订 立体手办▪
「DATE·A·BULLET」时崎狂三手办开订 立体手办▪
「狂赌之渊××」早乙女芽亚里粘土人开订 立体手办▪
「魔道祖师」魏无羨粘土人开订 立体手办▪
「新·奥特曼」奥特曼手办现已开订 立体手办▪