*2022年圣诞节到来啦，很高兴这次我们又能一起度过~

📂文章目录

• 前言
• 效果展示
• • 一、夜景烟花绽放动画效果
  • • HTML源码
• 2023年(新年)春节倒计时代码
• • 源码
• 2023除夕倒计时
• • 效果展示
  • 源码
• 宇宙星空-效果展示
• • 1.源码
  • 2.思路
  • 3.步骤(js部分)
• 更多干货🚀

前言

时光荏苒，白驹过隙。
2022这一年又在忙碌中度过了，过去的一年，我们同努力，我们共欢笑，每一次成功都蕴藏着我们辛勤的劳动。
新的一年即将来到，我们不能停滞不前，一味只是骄傲。愿大家与时俱进，拼搏不懈，共创新的辉煌！
借着新年到来的喜庆，给大家分享一个新年烟花的前端代码，快拿着代码展示给你的朋友们看吧！！
转眼间已经到了2022的尾巴，这一年对于国家来说丰富充实,冬奥会在北京举行、中国共产党第二十次全国代表大会召开、社会共同抗击疫情的第三年、我国完成天宫空间站建造……对于我们每一个个体，2022也承载着我们的快乐与悲伤，它是无法替代的。
新的一年马上就要到了，让我们告别2022，迎接2023！
希望2023,全糖去冰。

效果展示

一、夜景烟花绽放动画效果

HTML源码

浏览器不支持canvas
新年快乐
合家幸福
万事如意
心想事成
财源广进

再新建文件夹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.源码

 New Year Countdown

00
days
00
hours
00
minutes
00
seconds
    

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)"指在调用之前将调用器归零

更多干货🚀

1. 如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2. 💗【👇🏻👇🏻👇🏻关注我| 💬获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多
   前端 开发者，一起探讨 前端 Node 知识，互相学习」！