📋 前言 🖱 博客主页：在下马农的碎碎念 ✍ 本文由在下马农原创，首发于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

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

复杂一点的方式是将你的照片命名为相同的名字+不同的数字，例如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🍒🍒

在这里插入图片描述