4
100行Html5+CSS3+JS代码实现元旦倒计时界面
source link: https://blog.csdn.net/qq_53673551/article/details/122193841
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
100行Html5+CSS3+JS代码实现元旦倒计时界面
2022年到了，祝大家虎年大吉喜气临，昂首摆尾迎春来。双眼圆睁看世界，万水千山尽开颜。胡须翘翘美姿态，人人开心祝平安。巨大身躯摇摆摆，坎坷困境当笑谈。愿你虎年万事顺，吉星高照旺旺旺！
二、2022虎年计时
总体效果展示：
局部计时效果展示：
- 如果之前看过我这篇文章200行Html5+CSS3+JS代码实现动态圣诞树，那对于下面的VScode的配置步骤可以省略。
1.下载VSCode
下载链接：VSCode
- 在Hbuilder、idea运行也是可以的，这里推荐使用VSCode
2.配置插件
三个插件对应的功能：
- 改写标签后自动完善
- 切换成中文页面
- 让代码在网页中打开，默认键Alt+B
3.构建三个文件
- 在桌面新建一个空的文件夹，用VSCode打开
- 在VSCode新建三个文件 index .html style.css script.js （文件名字要和这个一样，不然会出错），把上面的图片也加入到文件夹中，命名为2022.png（图片可以自己选择，文章中的图片放到文章最下面了），最后保存别忘了
- 对于文件的层级问题，三个 index .html style.css script.js 在同一级文件夹内不要修改，如果在下一个层级或者上面一个层级需要改动选择
- 在index.html代码界面，默认键Alt+B 或者 鼠标右击，选择倒数第三个Open In Default Browser默认浏览器打开
4.添加额外功能
更换背景图：
- 在css代码的第八行，html的第六行，更改图片地址就行了
添加音乐：
- 在index.html代码中添加下列代码： <embed src="song.mp3" hidden="false" autostart="true" loop="true">
- src="音乐地址"，把想要播放的音乐，提前放到这个文件夹中，把这个音乐的命名填入src中就可以播放音乐
- hidden="true"表示隐藏音乐播放按钮，hidden="false"开启音乐播放按钮
- autostart="true" 打开网页加载完后自动播放
- loop="true"循环播放 如仅想播放一次则为：loop="false"
四、编码实现
CSS代码：
Html代码：
JS代码：
附录：
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK