【HTML】2023跨年烟花代码
*2022年圣诞节到来啦，很高兴这次我们又能一起度过~
📂文章目录
- 前言
- 效果展示
- 一、夜景烟花绽放动画效果
- HTML源码
- 2023年(新年)春节倒计时代码
- 源码
- 2023除夕倒计时
- 效果展示
- 源码
- 宇宙星空-效果展示
- 1.源码
- 2.思路
- 3.步骤(js部分)
- 更多干货🚀
前言
时光荏苒，白驹过隙。
2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。
新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！
借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！
转眼间已经到了2022的尾巴，这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体，2022也承载着我们的快乐与悲伤，它是无法替代的。
新的一年马上就要到了，让我们告别2022，迎接2023！
希望2023,全糖去冰。
效果展示
一、夜景烟花绽放动画效果
HTML源码
html5夜景放烟花绽放动画效果
![]()
![]()
新年快乐合家幸福万事如意心想事成财源广进
再新建文件夹img把以下两张图片放进去
city.png
moon.png
2023年(新年)春节倒计时代码
2023年新年倒计时HTML源代码，2023年春节倒计时代码，直接运行
index.html即可。
源码
NewYear.css
/*初始化*/
* {padding: 0;margin: 0 auto;
}
/*背景色*/
body,
html {background: url(./img/newyear.png) no-repeat;background-size: 100% 100%;background-attachment: fixed;/* background-color: black; */
}
/*父盒子*/
.fa {color:#6c5ce7;margin-top: 200px;background-color: rgba(0, 17, 17, 0.5);/*边框圆角*/border-radius: 80px;/*伸缩布局*/display: flex;/*改变主轴方向 竖排*/flex-direction: column;
}
.fir {margin-left: 620px;margin-bottom: 100px;font-size: 80px;
}
.fa .sj {/*伸缩布局*/display: flex;/*改变主轴方向*/flex-direction: column;
}
.fa .sj div {width: 100%;/*伸缩布局*/display: flex;/*主轴排列方式*/justify-content: center;color: black;margin-bottom: 60px;/*多行侧轴排列方式*/align-content: space-around;color:#ff7675;font-size: 55px;
}
.fa .sj .zi {color:#d63031;
}index.html
新年倒计时
距离2023春节(1-22)还有天时分秒
2023除夕倒计时
效果展示
源码
新年快乐
宇宙星空-效果展示
距离2023.1.1还有27天（天数我是乱写的，并不是按照文章发布时间来写的，大家可以自己修改源码）
1.源码
Document
2.思路
创建一个计时器函数, 计算出当前时间和目标时间的距离.
利用"setInterval"方法不断调用计时器函数,达到数字变换, 也就是倒计时的效果.
3.步骤(js部分)
var count = document.getElementsByClassName('main');var times0 = document.getElementsByClassName('time');var inputtime = +new Date("2023/01/01 00:00:00");var nowtime = +new Date();console.log(inputtime);var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)
A."var"定义变量
利用"document.getElementsByClassName()"方法提取中已经创建的元素作为js对象.
类似的方法有:
B. 获取时间
"+new Date()"方法可以获取当前时间距离"1970年1月1日0时0分0秒’的毫秒数, 利用这点可以获取当前时间.
括号中若添加具体日期(写法: 年/月/日 时:分:秒 ), 则可以获取具体日期距离"1970年1月1日0时0分0秒’的毫秒数, 利用这点可以获取目标时间.
function countdown(){var times = parseInt((inputtime - nowtime ) / 1000);if(times >= 0){var d = parseInt(times/60/60/24);d = d < 10 ? '0' + d : d ;var h = parseInt(times/60 /60%24);h = h < 10 ? '0' + h : h ;var m = parseInt(times/60%60);m = m < 10 ? '0' + m : m ;var s = parseInt(times%60);s = s < 10 ? '0' + s : s ;times0[0].innerHTML = d;times0[1].innerHTML = h;times0[2].innerHTML = m;times0[3].innerHTML = s;}else{clearInterval(timer)}}
C.创建计时器函数
计算时间的距离:
(目标时间-当前时间)/1000=时间距离
var times = parseInt((inputtime - nowtime ) / 1000);
时间距离转换成 天数,时数,分数,秒数:
并做一个简单判断:
如果计算出来的数字小于10, 则在数字面前添加一个0一保持美观和谐.
var d = parseInt(times/60/60/24);d = d < 10 ? '0' + d : d ;var h = parseInt(times/60 /60%24);h = h < 10 ? '0' + h : h ;var m = parseInt(times/60%60);m = m < 10 ? '0' + m : m ;var s = parseInt(times%60);s = s < 10 ? '0' + s : s ;
将计算所得数字添加到页面中:
利用到了 "innerhtml"方法, 主要用于改变中已经定义的元素.
最后做一个总的判断:
如果时间距离大于零, 则做计算, 展现倒计时效果.
如果距离等于零, 则对函数的反复调用停止, 计时终止
if(times >= 0){}else{clearInterval(timer)}
D.反复调用计时器函数
var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)
var timer = null;clearInterval(timer)timer = setInterval(countdown,1000)
"setInterval()"方法中有两个参数:
第一个: 将要调用的函数名;
第二个: 调用的间隔时间, 单位为一毫秒, 自然, “1000"即代表"1秒钟调用一次”
"clearInterval(timer)"指在调用之前将调用器归零
更多干货🚀
- 如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “
👍点赞” “✍️评论” “💙收藏” 一键三连哦！💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多
前端 开发者，一起探讨 前端 Node 知识，互相学习」！
