【HTML】2023跨年烟花代码
创始人
2024-05-01 16:43:17
0

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

📂文章目录

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

前言

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

效果展示

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

HTML源码



html5夜景放烟花绽放动画效果

浏览器不支持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.源码



Document

New Year Countdown


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 知识,互相学习」!

相关内容

热门资讯

安卓双系统添加应用,轻松实现多... 你有没有想过,你的安卓手机里可以同时运行两个系统呢?听起来是不是很酷?想象一边是熟悉的安卓系统,一边...
pipo安卓进系统慢,探究pi... 最近是不是发现你的Pipo安卓系统更新或者运行起来特别慢?别急,今天就来给你好好分析分析这个问题,让...
怎样使用安卓手机系统,安卓手机... 你有没有发现,安卓手机已经成为我们生活中不可或缺的一部分呢?从早晨闹钟响起,到晚上睡前刷剧,安卓手机...
双系统安卓安装caj,轻松实现... 你有没有想过,你的安卓手机里装上双系统,是不是就能同时享受安卓和Windows系统的乐趣呢?没错,这...
安卓使用ios系统教程,安卓用... 你是不是也和我一样,对安卓手机上的iOS系统充满了好奇?想要体验一下苹果的优雅和流畅?别急,今天我就...
安卓系统gps快速定位,畅享便... 你有没有遇到过这样的情况:手机里装了各种地图导航软件,但每次出门前都要等上好几分钟才能定位成功,急得...
安卓手机系统更新原理,原理与流... 你有没有发现,你的安卓手机最近是不是总在提醒你更新系统呢?别急,别急,让我来给你揭秘一下安卓手机系统...
安卓系统通知管理,全面解析与优... 你有没有发现,手机里的通知就像是一群调皮的小精灵,时不时地跳出来和你互动?没错,说的就是安卓系统的通...
安卓系统手机哪买,揭秘哪里购买... 你有没有想过,拥有一部安卓系统手机是多么酷的事情呢?想象你可以自由安装各种应用,不受限制地探索各种功...
安卓系统 ipv4,基于安卓系... 你知道吗?在智能手机的世界里,有一个系统可是无人不知、无人不晓,那就是安卓系统。而在这个庞大的安卓家...
目前安卓是什么系统,探索安卓系... 亲爱的读者,你是否曾好奇过,如今安卓系统究竟是什么模样?在这个科技飞速发展的时代,操作系统如同人体的...
安卓6.0系统比5.0,从5.... 你有没有发现,自从手机更新了安卓6.0系统,感觉整个人都清爽了不少呢?没错,今天咱们就来聊聊这个话题...
安卓2.36系统升级,功能革新... 你知道吗?最近安卓系统又来了一次大变身,那就是安卓2.36系统升级!这可不是一个小打小闹的更新,而是...
安卓系统源码怎么打开,并可能需... 你有没有想过,安卓系统的源码就像是一扇神秘的门,隐藏着无数的技术秘密?想要打开这扇门,你得掌握一些小...
安卓8.0系统体验视频,智能革... 你有没有听说安卓8.0系统最近可是火得一塌糊涂啊!作为一个紧跟科技潮流的数码达人,我当然要来给你好好...
宣传系统漫画app安卓,探索安... 亲爱的读者们,你是否曾在某个午后,百无聊赖地打开手机,想要寻找一些轻松愉悦的读物?今天,我要给你介绍...
鸿蒙替换安卓系统吗,开启智能生... 你知道吗?最近科技圈里可是炸开了锅,因为华为的新操作系统鸿蒙系统,据说要大举进军手机市场,替换掉安卓...
手机安卓系统深度清理,解锁手机... 手机里的东西是不是越来越多,感觉就像一个装满了杂物的储物柜?别急,今天就来教你一招——手机安卓系统深...
安卓上的windows系统,融... 你有没有想过,在安卓手机上也能体验到Windows系统的魅力呢?没错,这就是今天我要跟你分享的神奇故...
安卓系统焦点变化事件,Andr... 你知道吗?在安卓系统的世界里,最近发生了一件超级有趣的事情——焦点变化事件。这可不是什么小打小闹,它...