HTML实现除夕最美烟花,2023春节倒计时,新年不可没有烟花,最炫烟花代码分享

📋 前言

  • 🖱 博客主页:在下马农的碎碎念
  • ✍ 本文由在下马农原创,首发于CSDN
  • 📆 首发时间:2023/01/17
  • 📅 最近更新时间:2023/01/17
  • 🤵 此马非凡马,房星本是星。向前敲瘦骨,犹自带铜声。
  • 🙏作者水平有限,如发现错误,请留言轰炸哦!万分感谢!
  • 🤗 欢迎关注🔎点赞👍收藏⭐️留言📝先赞后看,腰缠万贯

之前给大家分享了兔圆圆烟花秀倒计时(传送门),有朋友比较喜欢3D款的烟花,想要把兔圆圆的倒计时和3D烟花组合在一起,在农历春节来临之前,把兔圆圆倒计时+3D烟花秀的代码分享给大家!!!!

本次兔圆圆版3D烟花新年春节倒计时,和上次一样,倒计时页面由几张兔圆圆吉祥物的萌照作为背景,中间显示倒计时的时间,等到时间归零,则会展示3D版的倒计时。和上次不同的就是,倒计时结束后的烟花效果修改为了3D版本。



《《神奇的HTML总目录》》

汇集所有绚丽HTML效果,分享所有源码,小白也可体验前端HTML的乐趣

目录传送门:🍒🍒神奇的HTML🍒🍒


一、效果展示

1.1 预览图

请添加图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

1.2 预览视频

countdownD_1

二、自定义修改

2.1 修改背景音乐

2.1.1 倒计时页面背景音乐

倒计时界面背景音乐的设置代码位于文件index.html的第13行,将audio标签中的source标签的src属性值修改为你想要添加的音乐所在目录即可,也可修改为在线的外部链接。

<!DOCTYPE html>
<!--geyao--><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="css/style.css"><link rel="stylesheet" href="css/mobile.css"><title>兔年春节倒计时</title>	// 网页标题</head><body id = "bgc"><audio id="a1" loop="loop"><source src="rabbit.mp3">	// 倒计时界面背景音乐设定</audio><div class="container"><h2><span id="title">兔年春节倒计时</span>2023</h2>	// 倒计时界面显示文字<div class="countdown"><div id="day">--</div><div id="hour">--</div><div id="minute">--</div><div id="second">--</div></div><!-- 手动切换不好看 直接加定时器切换 微信公众号关注在下马农--><!-- <div id="btn">切换背景</div> --></div><script  src="js/script.js"></script></body>
</html>

2.1.2 3D烟花界面背景音乐

3D烟花界面背景音乐的设置代码位于文件firework.html的第20行,将audio标签中的source标签的src属性值修改为你想要添加的音乐所在目录即可,也可修改为在线的外部链接。

</head>
<body>
<audio id="a1" loop="loop"><source src="xnkl.mp3">		// 3D烟花界面背景音乐设置
</audio>
<canvas id="canvas" style="position:absolute;width:100%;height:100%;z-index:8888"></canvas>
<canvas style="position:absolute;width:100%;height:100%;z-index:9999" class="canvas" ></canvas>

2.2 倒计时时间设定

倒计时的预定时间也是可以自定义的,现在文件默认是2023/01/22 00:00:00,也就是除夕,这个时间可以设定成任何日子,比如女朋友的生日,或者其他的任何节日时间。
修改的代码位于文件夹js中的script.js文件第73行,改下时间即可。

 function show_runtime() {var newDay = '2023/01/22 00:00:00';var countDate = new Date(newDay);

2.3 背景图片设定

如果你想要用在其他的节日或者日期,那么背景图片的更换也是必不可少的,现在默认是四张图片轮换。使用的图片名为tu1.png-tu4.png

  1. 非常简单的替换方式是直接拿四张照片更改为tu1.png-tu4.png放入image文件夹中即可。

  2. 复杂一点的方式是将你的照片命名为相同的名字+不同的数字,例如photo1.png photo2.png photo3.png,然后修改文件夹js中的script.js文件第118行,将tu换为你自己的图片,即photo。然后再将114行中的数字5改为你的图片数量加一,本例中就应修改为3+1=4。

110 function downTime() {
111     let item = 1;
112     setInterval(() => {
113       item++;
114       if (item === 5) {
115         item = 1;
116       }
117       console.log(item, 'item');
118       document.body.style.backgroundImage = `url(./image/tu${item}.png)`;
119       return item;
120       e.stopPropagation(); //取消事件冒泡
121     }, 2000);
122  

2.4 倒计时页面文字设定

如果你想要修改倒计时页面的文字,可以修改文件index.html中第16行。
span中是上边部分小字,2023的位置对应大字体。

<h2><span id="title">兔年春节倒计时</span>2023</h2>

三、如何在自己电脑上运行

运行步骤:

3.1 下载源码

文末附源代码下载方式

3.2 运行

直接双击index.html即可运行,快来试试吧!!!

四、源代码分享

有需要源码的小伙伴可以微信搜索关注公众号: 在下马农,也可点击文末名片扫码关注,在公众号后台回复关键词 倒计时3D,下载链接在文章末尾。
在这里插入图片描述
在这里插入图片描述


💝最新3D旋转纪念相册源码分享💝

往期精彩:

💝2022烟花分享💝
💝2023 3D版烟花分享💝


《《神奇的HTML总目录》》

汇集所有绚丽HTML效果,分享所有源码,小白也可体验前端HTML的乐趣

目录传送门:🍒🍒神奇的HTML🍒🍒


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/70180.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTML5生日快乐在线网页祝福 (一场浪漫的烟花秀) HTML+CSS+JavaScript

❤ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套) 】 &#x1…

不用找,你想要的节日 节庆 节气展板展架模板素材都在这里

看到大家都在问节日 节庆 节气展板展架模板素材&#xff0c;既要免费又要质量好&#xff0c;数量还要多&#xff0c;小编好不容易挖到了宝藏素材网站哦&#xff0c;不知道爱给网这个网站大家认识不&#xff0c;资源优质数量庞大&#xff0c;使用体验也很好&#xff0c;要是需要…

CSS 实现灯笼动画,祝大家元旦快乐

前言 &#x1f44f;CSS 实现大红灯笼动画&#xff0c;祝大家元旦快乐&#xff0c;2023越来越棒&#xff01;速速来Get吧~ &#x1f947;文末分享源代码。记得点赞关注收藏&#xff01; 1.实现效果 2.实现步骤 定义一个灯笼的背景色bg&#xff0c;线条颜色lineColor :root …

2023年春节跨年烟花网页特效

粉丝朋友们大家好&#xff0c;我是你们的 csdn的博主&#xff1a;lqj_本人 哔哩哔哩&#xff1a;小淼前端 另外&#xff0c;大家也可以关注我的哔哩哔哩账号&#xff0c;我会不定时的发布一些有关于全栈云开发以及前端开发的详解视频源码 1.微信小程序腾讯云开发之学生端收集数…

关于节日文化的HTML网页设计-----二十四节气

&#x1f329;️ 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f482; 作者主页: 【进入主页—&#x1f680;获取更多源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;HTML5网页期末作业 (1000套…

二十四节气-立冬文案、海报。万物收藏,冬之伊始。

立冬将至&#xff0c;奉上一些立冬文案和海报&#xff0c;快来看看吧&#xff01; 更多立冬海报素材免费下载&#xff1a; https://www.sucai999.com/?vNTYwNDUx 1.日照数九冬至天&#xff0c;清霜风高未辞岁 2.大河奔涌&#xff0c;不因冬止&#xff0c;寰球凉热共此时 3.…

QNAP NAS局域网无法访问的解决方法

最近在使用威联通NAS的时候突然访问不到设备&#xff0c;各种方法都无法建立连接&#xff0c;NAS自闭了……&#xff0c;找遍网上也没有找到解决方法&#xff0c;人也自闭了……&#xff0c;经过几天的摸索终于找到了问题所在&#xff0c;原因居然是NAS自己把自己网线掐了 问题…

逆水寒服务器维护7.5,逆水寒7.26日维护到什么时候 逆水寒7.26日游戏改动汇总介绍...

逆水寒7.26日维护到什么时候 逆水寒7.26日游戏改动汇总介绍 2018-07-26 10:08:08来源&#xff1a;游戏下载编辑&#xff1a;苦力趴评论(0) 《逆水寒》官方发布微博&#xff0c;称为了保证服务器的运行稳定和服务质量&#xff0c;将于7月26日上午7:00-上午10:00进行停服维护。此…

逆水寒服务器维护到什么时候,逆水寒11月1日更新到什么时候_维护到几点

逆水寒11月1日周四例行维护&#xff0c;首届跨服比武大会“说英雄谁是英雄”将正式拉开战火&#xff0c;同时将上线大批的时装&#xff0c;感兴趣的一起来看看吧。 逆水寒11月1日更新预告&#xff1a; 更新时间&#xff1a;上午08&#xff1a;00-10&#xff1a;00更新维护 首届…

逆水寒服务器怎么全维护,《逆水寒》2020年1月22日更新公告

各位自在同门&#xff1a; 为了保证服务器的运行稳定和服务质量&#xff0c;《逆水寒》将于2020年1月22日(周三)早8:00停机进行维护工作&#xff0c;预计维护到上午10:00。本周更新较往常提前了一天&#xff0c;周四不再进行维护更新。1月30日(初六)春节假期的维护更新将暂停一…

网易逆水寒服务器型号,《逆水寒》周年庆 网易:什么要求都满足

逆水寒在生日之际&#xff0c;交上了一份给玩家的答卷&#xff0c;推出了全新资料片“混江湖“。更轻松、更休闲、更有市井烟火气的全新江湖&#xff0c;现已面向所有玩家开放。 这次逆水寒针对玩家建议&#xff0c;究竟做了哪些更新呢&#xff1f; 玩家&#xff1a;日常一条龙…

逆水寒智能NPC也会结婚生子!|与AI共创游戏未来,掀起AIGC革命性体验!

网易6月30日将正式开服公测的《逆水寒》手游&#xff0c;推出被“逆水寒游戏GPT”加持的高智能AINPC&#xff0c;号称玩家可与NPC无限交流&#xff0c;甚至插手NPC私生活&#xff0c;改变游戏走向。与多数游戏中NPC只会“按部就班”做事设定不同的是&#xff0c;AI赋能下的智能…

笔记本玩逆水寒服务器未响应,运行逆水寒电脑崩溃怎么办_逆水寒运行游戏时电脑崩溃问题解决指引_游戏吧...

部分笔记本在运行逆水寒游戏时会出现崩溃现象&#xff0c;许多玩家都不知道该怎么办&#xff0c;如何解决这个问题&#xff0c;下面玩家宝宝们就和游戏吧小编一起来看一看《逆水寒》运行游戏时电脑崩溃问题解决指引吧&#xff01; 《逆水寒》运行游戏时电脑崩溃问题解决指引 亲…

逆水寒服务器维护,逆水寒11月29日更新到几点进游戏 逆水寒更新维护公告

逆水寒在11月29日进行了一次新版本的更新&#xff0c;新团本风雪铁牢关要上线了&#xff0c;很多奖励接踵而来&#xff0c;一些小伙伴还不知道更新了什么&#xff0c;下面就来为大家分享一下逆水寒的更新维护公告。 各位自在同门&#xff1a; 为了保证服务器的运行稳定和服务质…

逆水寒计算机丢失api,逆水寒游戏崩溃常见问题汇总 逆水寒常见问题解决方法...

逆水寒游戏可能因为太过于火爆让许多小问题层出不穷,许多玩家都遇到过一进游戏就发生了逆水寒游戏崩溃的情况,或者就是提示游戏正在运行,无法正常打开,不用担心点击查看逆水寒常见问题解决方法来保护您流畅运行游戏吧。 受到网络、下载服务器、操作系统等多方面的原因的影响…

逆水寒服务器维护26号,逆水寒维护到几点 逆水寒8.23维护公告时间

逆水寒维护到几点?逆水寒几点可以登录游戏?逆水寒今天更新维护了哪些内容?逆水寒在8月23日更新了最新的版本内容。下面&#xff0c;就随琵琶网小编来了解一下! 逆水寒维护到几点? 《逆水寒》于2018年8月23日早上8:00停机进行维护工作&#xff0c;预计维护到上午10:00。 逆水…

遇见逆水寒服务器修复,遇见逆水寒暂时关服修整,改为乙女游戏,下次再见就是氪金之时?...

原标题&#xff1a;遇见逆水寒暂时关服修整&#xff0c;改为乙女游戏&#xff0c;下次再见就是氪金之时&#xff1f; 作为逆水寒的衍生作&#xff0c;遇见逆水寒虽然写作“NPC攻略小助手”&#xff0c;但实际上却是一款“恋爱”手游&#xff0c;对象正是逆水寒端游中比较受欢迎…

阿里云推出工作学习 AI 助手“通义听悟”;谷歌发布 PaLM2;吴恩达推出了三门课

&#x1f989; AI新闻 &#x1f680; 阿里云推出工作学习 AI 助手“通义听悟” 摘要&#xff1a;阿里云峰会・粤港澳大湾区上&#xff0c;阿里云宣布推出最新产品“通义听悟”&#xff0c;该产品能用于会议讨论、教学培训、调研访谈、视频观看等场景&#xff0c;依托大模型&a…

面向开发者的 ChatGPT 提示工程课程|吴恩达携手OpenAI 教你如何编写 prompt

提示工程&#xff08;Prompt Engineering&#xff09;是一门相对较新的学科&#xff0c;旨在开发和优化提示&#xff0c;从而高效地将语言模型(LM)用于各种应用和研究主题&#xff0c;并帮助开发人员更好地理解大型语言模型(LLM)的能力和局限。随着 ChatGPT 等大语言模型的爆火…

解决:同样的Python程序,在cmd和pycharm都能正常运行,但是在Visual Studio Code却报错,且`conda activate`命令无法激活或切换虚拟环境

解决&#xff1a;同样的Python程序&#xff0c;在cmd和pycharm都能正常运行&#xff0c;但是在Visual Studio Code却报错&#xff0c;且conda activate命令无法激活或切换虚拟环境 ⚙️1.软件环境⚙️&#x1f50d;2.问题描述&#x1f50d;&#x1f421;3.解决方法&#x1f421…