【02】v1.0.1更新增加倒计时完成后的放烟花页面

2025-07-21 17:17:24

【02】v1.0.1更新增加倒计时完成后的放烟花页面【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子开发背景由于看到C站有个任务是上传新年主题相关的代码可以+6分，为了这6分必须拼一下

【02】v1.0.1更新增加倒计时完成后的放烟花页面

【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子

开发背景

由于看到C站有个任务是上传新年主题相关的代码可以+6分，为了这6分必须拼一下子，要知道C站挣6分是有多么难的，优雅草央千澈是要冲刺全国排名的人那必须去争取一下，ok我们废话不多说开始实战吧，本次开发技术栈采用html5+div+CSS+JavaScript，用html给写一个新年放烟花并且领取一个随机新年礼物的小代码供大家送给自己心上人礼物-为了完成C站的新年主题任务-优雅草央千澈-做一条关于新年的代码分享给你们，章节共计5篇。

本文还有个事情声明下，优雅草央千澈还是改名为优雅草卓伊凡，本身自己的笔名是卓伊凡，但是酷爱霹雳侠影中的角央千澈，因此之前一直以央千澈为名字，但是随着目前人气的升高，不免这样会影响到偶像这个名字重名，让很多道友不小心搜到我，这样不太好，因此后续所有的文章均改名为卓伊凡。

章节

【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录

效果实时演示地址

gitee开源地址

实战开发

由于认为播放器显示的内容不够多，加上播放器不够好看，因此我们优化一下弄个好看的播放器代码，

不过== 因为卓伊凡最近才做了音乐并且提交了网易云，因此想了下直接调用网易云的音乐吧，加上卓伊凡自己的音乐放在背景也没有什么版权风险。

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐播放器</title>
</head>
<body>
  <h1>网易云音乐播放器</h1>
  <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="86" src=";id=2757148&auto=1&height=66"></iframe>
</body>
</html>

在网易云音乐播放器的外链中，id 是用来标识你想要播放的具体音乐、专辑、歌单等资源的唯一标识符。不同类型的资源有不同的 type 参数和值。以下是一些常见的资源类型及其 type 和 id 参数的说明：

单曲 (type=2)：id 对应的是单曲的 ID。
歌单 (type=0)：id 对应的是歌单的 ID。
专辑 (type=1)：id 对应的是专辑的 ID。
艺人 (type=4)：id 对应的是艺人的 ID。

在你提供的代码示例中，id=2757148 对应的是某个特定的单曲。如果你想更改播放器中的音乐，只需要替换 id 的值为你想要播放的音乐的 ID 即可。

拿卓伊凡的例子吧，选择type=1 用专辑id，卓伊凡最新专辑——涅槃，

id 应该就是这个了 albumId=2601802

那么最终代码为：

好看多了，并且也能自动播放，挺好！另外发现个问题，背景图就一张显得非常单调，因此我们再追加2张图，关于新年的。

用MJ再做了两张图，看上去非常的不错，接下来我们要写在背景中，并且加入渐入渐出的切换变化效果。

为了实现背景图片的切换，可以使用JavaScript来定期更换背景图片。以下是具体的修改步骤：

定义背景图片数组：在JavaScript中定义一个包含所有背景图片路径的数组。设置定时器：使用setInterval函数定期更换背景图片。更新背景图片：编写一个函数来更新body的背景图片。增加以下代码

代码语言：javascript代码运行次数：0运行复制

// 背景图片数组
        ct backgroundImages = [
            'assets/img/bg.png',
            'assets/img/bg2.jpg',
            'assets/img/bg.jpg'
        ];
        let currentBackgroundIndex = 0;

        // 更新背景图片的函数
        function updateBackground() {
            document.body.style.backgroundImage = `url('${backgroundImages[currentBackgroundIndex]}')`;
            currentBackgroundIndex = (currentBackgroundIndex + 1) % backgroundImages.length;
        }

        // 每5秒更换一次背景图片
        setInterval(updateBackground, 5000);

        // 初始设置背景图片
        updateBackground();

搞定，看起来又好了很多，不过现在结构有点乱，我们要做两件事情，把样式文件css单独放，把JavaScript 单独放，直接嵌入页面是不合理的。

单独建立和zhuoivan.js

放在head标签中，对应把css文件粘贴进去

放在body标签中，对应吧js内容粘贴进文件，并且移除index里面的

现在再来看：

代码语言：javascript代码运行次数：0运行复制

<!--
 * @Author: 卓伊凡
 * @LastEditors: 卓伊凡
 * @email: 422108995@qq
 * @github: 
 * @gitee: /
 * @Date: 2025-01-18 1:5:41
 * @LastEditTime: 2025-01-20 10:1:5
 * @motto: Still water runs deep
 * @Description: 优雅草科技卓伊凡-优雅草科技主程-兼技术总监-优雅草科技欢迎合作共赢，优雅草科技www.youyacao，感谢合作与支持，请仔细阅读优雅草科技的开源lisence文件，您可以百分百100%使用优雅草的开源产品，但是需要遵守相关规则，并且需要申明是使用了优雅草科技的产品
 * @FilePath: \happynewyear\index.html
-->
<!--
 * @Author: 卓伊凡
 * @LastEditors: 卓伊凡
 * @email: 422108995@qq
 * @github: 
 * @gitee: /
 * @Date: 2025-01-18 1:5:41
 * @LastEditTime: 2025-01-20 10:1:7
 * @motto: Still water runs deep
 * @Description: 优雅草科技卓伊凡-优雅草科技主程-兼技术总监-优雅草科技欢迎合作共赢，优雅草科技www.youyacao，感谢合作与支持，请仔细阅读优雅草科技的开源lisence文件，您可以百分百100%使用优雅草的开源产品，但是需要遵守相关规则，并且需要申明是使用了优雅草科技的产品
 * @FilePath: \happynewyear\index.html
-->



<!DOCTYPE html>
<html lang="zh-C">
<head>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年-新年倒计时-优雅草央千澈</title>

    <link rel="stylesheet" href="assets/css/?v=1.0.0">

</head>
<body>

    <script src="assets/js/zhuoivan.js?v=1.0.0"></script>

    <div id="countdown-container">
        <div id="countdown-title">2025年蛇年除夕夜倒计时·优雅草科技-卓伊凡</div>
        <div id="countdown"></div>

        <div id="audio-player">


            <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="86" src=";id=2601802&auto=1&height=66"></iframe>


        </div>
    </div>

    <div class="firework firework-left"></div>
    <div class="firework firework-right"></div>


</body>
</html>

非常的简介明了，好了我们现在需要增加一个放烟花页面，就叫celebrate.html吧

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="zh-C">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年-新年烟花秀</title>
    <style>
        body {
            background-color: black;
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <script>
        ct canvas = document.getElementById('fireworks');
        ct ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            ctructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 4 + 1;
                this.speed = Math.random() * 4 + 2;
                 = `hsl(${Math.random() * 60}, 100%, 50%)`;
                 = false;
                this.particles = [];
            }

            update() {
                if (!) {
                    this.y -= this.speed;
                    if (this.y < canvas.height / 2) {
                        ();
                    }
                } else {
                    for (let i = 0; i < this.particles.length; i++) {
                        this.particles[i].update();
                        if (this.particles[i].alpha <= 0) {
                            this.particles.splice(i, 1);
                            i--;
                        }
                    }
                }
            }

            draw() {
                if (!) {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fillStyle = ;
                    ctx.fill();
                } else {
                    for (let particle of this.particles) {
                        particle.draw();
                    }
                }
            }

            explode() {
                 = true;
                for (let i = 0; i < 100; i++) {
                    this.particles.push(new Particle(this.x, this.y, ));
                }
            }
        }

        class Particle {
            ctructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 2 + 1;
                this.speed = {
                    x: (Math.random() - 0.5) * 5,
                    y: (Math.random() - 0.5) * 5
                };
                this.gravity = 0.05;
                this.alpha = 1;
                 = color;
            }

            update() {
                this.x += this.speed.x;
                this.y += this.speed.y;
                this.speed.y += this.gravity;
                this.alpha -= 0.01;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${}, ${this.alpha})`;
                ctx.fill();
            }
        }

        let fireworks = [];

        function createFirework() {
            ct x = Math.random() * canvas.width;
            ct y = canvas.height;
            fireworks.push(new Firework(x, y));
        }

        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < fireworks.length; i++) {
                fireworks[i].update();
                fireworks[i].draw();
                if (fireworks[i].exploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                    i--;
                }
            }

            requestAnimationFrame(animate);
        }

        setInterval(createFirework, 1000);
        animate();
    </script>
</body>
</html>

以上代码：

HTML结构：包含一个<canvas>元素，用于绘制烟花效果。
CSS样式：设置背景为黑，并隐藏滚动条。
JavaScript代码：
- Firework类：表示一个烟花，包含位置、大小、速度、颜等属性，以及更新和绘制方法。
- Particle类：表示烟花爆炸后的粒子，包含位置、大小、速度、重力、透明度等属性，以及更新和绘制方法。
- createFirework函数：创建一个新的烟花并添加到fireworks数组中。
- animate函数：清除画布，更新和绘制所有烟花及其粒子，并使用requestAnimationFrame循环动画。
- setInterval：每秒创建一个新的烟花。

稍微在调整下，让烟花可以升空到最顶部，让烟花爆炸变成随机事件

代码语言：javascript代码运行次数：0运行复制

class Firework {
            ctructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 4 + 1;
                this.speed = Math.random() * 4 + 2;
                 = `hsl(${Math.random() * 60}, 100%, 50%)`;
                 = false;
                this.particles = [];
                 = Math.random() * canvas.height * 0.5; // 随机爆炸高度
            }

随机爆炸高度：

在Firework类的构造函数中添加了一个targetHeight属性，该属性是一个随机值，范围在0到画布高度的一半之间。在update方法中，检查烟花的位置是否小于targetHeight，如果是，则调用explode方法。

烟花上升到最顶部：

通过设置targetHeight为随机值，烟花可以在不同的高度爆炸，但仍然会升空到画布的最顶部。

浏览器看了下效果，还行，就是可以调整下速度还有大小，完了下一步再配上烟花爆竹声音就很不错了，对了，这个页面不能不加祝福词呀。

新年伊始，愿你像小蛇般灵动，在生活的舞台上轻盈起舞，收获满满的惊喜与欢乐，这句祝福词不错。

为了在页面加载后显示带有渐变效果的祝福词文字，我们可以使用CSS和JavaScript来实现。具体步骤如下：

添加HTML元素：在页面中添加一个用于显示祝福词的<div>元素。
添加CSS样式：定义祝福词的样式，包括渐变效果。
使用JavaScript：在页面加载后，通过JavaScript控制祝福词的渐变效果。

以下是具体的实现步骤： 1. 添加HTML元素

在<body>中添加一个<div>元素来显示祝福词。

完整代码：

代码语言：javascript代码运行次数：0运行复制

<!DOCTYPE html>
<html lang="zh-C">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年蛇年-新年烟花秀-优雅草卓伊凡</title>
    <style>
        body {
            background-color: black;
            margin: 0;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        #message {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 24px;
            color: white;
            opacity: 0;
            text-align: center;
            transition: opacity s ease-in-out;
        }
    </style>
</head>
<body>
    <canvas id="fireworks"></canvas>
    <div id="message">新年伊始，愿你像小蛇般灵动，在生活的舞台上轻盈起舞，收获满满的惊喜与欢乐</div>
    <script>
        ct canvas = document.getElementById('fireworks');
        ct ctx = canvas.getContext('2d');
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        class Firework {
            ctructor(x, y) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 4 + 1;
                this.speed = Math.random() * 4 + 2;
                 = `hsl(${Math.random() * 60}, 100%, 50%)`;
                 = false;
                this.particles = [];
                 = Math.random() * canvas.height * 0.5; // 随机爆炸高度
            }

            update() {
                if (!) {
                    this.y -= this.speed;
                    if (this.y < canvas.height / 2) {
                        ();
                    }
                } else {
                    for (let i = 0; i < this.particles.length; i++) {
                        this.particles[i].update();
                        if (this.particles[i].alpha <= 0) {
                            this.particles.splice(i, 1);
                            i--;
                        }
                    }
                }
            }

            draw() {
                if (!) {
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fillStyle = ;
                    ctx.fill();
                } else {
                    for (let particle of this.particles) {
                        particle.draw();
                    }
                }
            }

            explode() {
                 = true;
                for (let i = 0; i < 100; i++) {
                    this.particles.push(new Particle(this.x, this.y, ));
                }
            }
        }

        class Particle {
            ctructor(x, y, color) {
                this.x = x;
                this.y = y;
                this.size = Math.random() * 2 + 1;
                this.speed = {
                    x: (Math.random() - 0.5) * 5,
                    y: (Math.random() - 0.5) * 5
                };
                this.gravity = 0.05;
                this.alpha = 1;
                 = color;
            }

            update() {
                this.x += this.speed.x;
                this.y += this.speed.y;
                this.speed.y += this.gravity;
                this.alpha -= 0.01;
            }

            draw() {
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.fillStyle = `rgba(${}, ${this.alpha})`;
                ctx.fill();
            }
        }

        let fireworks = [];

        function createFirework() {
            ct x = Math.random() * canvas.width;
            ct y = canvas.height;
            fireworks.push(new Firework(x, y));
        }

        function animate() {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);

            for (let i = 0; i < fireworks.length; i++) {
                fireworks[i].update();
                fireworks[i].draw();
                if (fireworks[i].exploded && fireworks[i].particles.length === 0) {
                    fireworks.splice(i, 1);
                    i--;
                }
            }

            requestAnimationFrame(animate);
        }

        setInterval(createFirework, 1000);
        animate();

         // 渐变效果
          = function() {
            ct message = document.getElementById('message');
            message. = 1;
        };
    </script>
</body>
</html>

ok 新年主题代码告一段落，v1.0.1更新

#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格

本文地址：http://www.dnpztj.cn/biancheng/1165616.html

本站网友日本新闻	20分钟前发表
0; left
本站网友日月神教	16分钟前发表
center; height
本站网友心跳一百	23分钟前发表
5 * @motto
本站网友乙脑减毒活疫苗	7分钟前发表
但是需要遵守相关规则
本站网友云南装潢	8分钟前发表
ok我们废话不多说开始实战吧
本站网友亚运村二手房	11分钟前发表
5
本站网友泉州租房信息	6分钟前发表
请仔细阅读优雅草科技的开源lisence文件
本站网友建行深圳分行	16分钟前发表
absolute; top
本站网友银行个人理财	4分钟前发表
就是可以调整下速度还有大小
本站网友炖鸡汤放什么材料好吃	11分钟前发表
0
本站网友房产税计税依据	16分钟前发表
在生活的舞台上轻盈起舞
本站网友如何减去双下巴	21分钟前发表
大小
本站网友碧螺春的功效	6分钟前发表
收获满满的惊喜与欢乐
本站网友胡子男	24分钟前发表
100%
本站网友 44aaa	0秒前发表
卓伊凡 * @email
本站网友常州地税局	13分钟前发表
透明度等属性
本站网友安全焦点	18分钟前发表
1
本站网友黑茶减肥	30分钟前发表
浏览器看了下效果
本站网友广州店铺出租	18分钟前发表
initial-scale=1.0"> <title>网易云音乐播放器</title> </head> <body> <h1>网易云音乐播放器</h1> <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="100%" height="86" src=";id=2757148&auto=1&height=66"></iframe> </body> </html>在网易云音乐播放器的外链中

【02】v1.0.1更新增加倒计时完成后的放烟花页面

【02】v1.0.1更新增加倒计时完成后的放烟花页面

[操作系统] 深入理解约翰·冯·诺伊曼体系

QQ空间左边第一个图文模块肿么用

MySql场景面试题：电商购物中最贵及购买次数最多的商品

解密prompt系列47. O1 Long Thought的一些特征分析