【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更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录
效果实时演示地址
https://happynewyear.youyacao.com/
gitee开源地址
https://gitee.com/youyacao/happynewyear
实战开发
由于认为播放器显示的内容不够多，加上播放器不够好看，因此我们优化一下 弄个好看的播放器代码，
不过== 因为卓伊凡最近才做了音乐并且提交了网易云，因此想了下直接调用网易云的音乐吧，加上卓伊凡自己的音乐放在背景也没有什么版权风险。
<!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="https://music.163.com/outchain/player?type=2&id=27571483&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=27571483 对应的是某个特定的单曲。如果你想更改播放器中的音乐，只需要替换 id 的值为你想要播放的音乐的 ID 即可。
拿卓伊凡的例子吧，选择type=1 用专辑id，卓伊凡最新专辑——涅槃，
id 应该就是这个了 albumId=260180233
那么最终代码为：
好看多了，并且也能自动播放，挺好！另外发现个问题，背景图就一张显得非常单调，因此我们再追加2张图，关于新年的。
用MJ再做了两张图，看上去非常的不错，接下来我们要写在背景中，并且加入渐入渐出的切换变化效果。
为了实现背景图片的切换，可以使用JavaScript来定期更换背景图片。以下是具体的修改步骤：
定义背景图片数组：在JavaScript中定义一个包含所有背景图片路径的数组。
设置定时器：使用setInterval函数定期更换背景图片。
更新背景图片：编写一个函数来更新body的背景图片。
增加以下代码
// 背景图片数组 const backgroundImages = [ 'assets/img/bg.png', 'assets/img/bg2.jpg', 'assets/img/bg3.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.css 和zhuoivan.js
<link rel="stylesheet" href="assets/css/zhuoivan.css?v=1.0.0">
放在head标签中，对应把css文件粘贴进去
放在body标签中，对应吧js内容粘贴进文件，并且移除index里面的
现在再来看：
<!-- * @Author: 卓伊凡 * @LastEditors: 卓伊凡 * @email: 422108995@qq.com * @github: https://github.com/youyacao * @gitee: https://gitee.com/youyacao/ * @Date: 2025-01-18 13:35:41 * @LastEditTime: 2025-01-20 10:31:53 * @motto: Still water runs deep * @Description: 优雅草科技卓伊凡-优雅草科技主程-兼技术总监-优雅草科技欢迎合作共赢，优雅草科技官网www.youyacao.com，感谢合作与支持，请仔细阅读优雅草科技的开源lisence文件，您可以百分百100%使用优雅草的开源产品，但是需要遵守相关规则，并且需要申明是使用了优雅草科技的产品 * @FilePath: \happynewyear\index.html --> <!-- * @Author: 卓伊凡 * @LastEditors: 卓伊凡 * @email: 422108995@qq.com * @github: https://github.com/youyacao * @gitee: https://gitee.com/youyacao/ * @Date: 2025-01-18 13:35:41 * @LastEditTime: 2025-01-20 10:31:37 * @motto: Still water runs deep * @Description: 优雅草科技卓伊凡-优雅草科技主程-兼技术总监-优雅草科技欢迎合作共赢，优雅草科技官网www.youyacao.com，感谢合作与支持，请仔细阅读优雅草科技的开源lisence文件，您可以百分百100%使用优雅草的开源产品，但是需要遵守相关规则，并且需要申明是使用了优雅草科技的产品 * @FilePath: \happynewyear\index.html --> <!DOCTYPE html> <html lang="zh-CN"> <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/zhuoivan.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="https://music.163.com/outchain/player?type=1&id=260180233&auto=1&height=66"></iframe> </div> </div> <div class="firework firework-left"></div> <div class="firework firework-right"></div> </body> </html>
非常的简介明了，好了 我们现在需要增加一个放烟花页面，就叫celebrate.html吧
<!DOCTYPE html> <html lang="zh-CN"> <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> const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Firework { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 4 + 1; this.speed = Math.random() * 4 + 2; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; this.exploded = false; this.particles = []; } update() { if (!this.exploded) { this.y -= this.speed; if (this.y < canvas.height / 2) { this.explode(); } } 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 (!this.exploded) { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } else { for (let particle of this.particles) { particle.draw(); } } } explode() { this.exploded = true; for (let i = 0; i < 100; i++) { this.particles.push(new Particle(this.x, this.y, this.color)); } } } class Particle { constructor(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; this.color = 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.color}, ${this.alpha})`; ctx.fill(); } } let fireworks = []; function createFirework() { const x = Math.random() * canvas.width; const 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：每秒创建一个新的烟花。
稍微在调整下，让烟花可以升空到最顶部，让烟花爆炸变成随机事件
class Firework { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 4 + 1; this.speed = Math.random() * 4 + 2; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; this.exploded = false; this.particles = []; this.targetHeight = Math.random() * canvas.height * 0.5; // 随机爆炸高度 }
随机爆炸高度：
在Firework类的构造函数中添加了一个targetHeight属性，该属性是一个随机值，范围在0到画布高度的一半之间。
在update方法中，检查烟花的位置是否小于targetHeight，如果是，则调用explode方法。
烟花上升到最顶部：
通过设置targetHeight为随机值，烟花可以在不同的高度爆炸，但仍然会升空到画布的最顶部。
浏览器看了下效果，还行，就是可以调整下 速度 还有大小，完了下一步 再配上烟花爆竹声音就很不错了，对了，这个页面不能不加祝福词呀。
新年伊始，愿你像小蛇般灵动，在生活的舞台上轻盈起舞，收获满满的惊喜与欢乐，这句祝福词不错。
为了在页面加载后显示带有渐变效果的祝福词文字，我们可以使用CSS和JavaScript来实现。具体步骤如下：
- 添加HTML元素：在页面中添加一个用于显示祝福词的
<div>元素。 - 添加CSS样式：定义祝福词的样式，包括渐变效果。
- 使用JavaScript：在页面加载后，通过JavaScript控制祝福词的渐变效果。
以下是具体的实现步骤：
1. 添加HTML元素
在<body>中添加一个<div>元素来显示祝福词。
完整代码：
<!DOCTYPE html> <html lang="zh-CN"> <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 3s ease-in-out; } </style> </head> <body> <canvas id="fireworks"></canvas> <div id="message">新年伊始，愿你像小蛇般灵动，在生活的舞台上轻盈起舞，收获满满的惊喜与欢乐</div> <script> const canvas = document.getElementById('fireworks'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; class Firework { constructor(x, y) { this.x = x; this.y = y; this.size = Math.random() * 4 + 1; this.speed = Math.random() * 4 + 2; this.color = `hsl(${Math.random() * 360}, 100%, 50%)`; this.exploded = false; this.particles = []; this.targetHeight = Math.random() * canvas.height * 0.5; // 随机爆炸高度 } update() { if (!this.exploded) { this.y -= this.speed; if (this.y < canvas.height / 2) { this.explode(); } } 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 (!this.exploded) { ctx.beginPath(); ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); ctx.fillStyle = this.color; ctx.fill(); } else { for (let particle of this.particles) { particle.draw(); } } } explode() { this.exploded = true; for (let i = 0; i < 100; i++) { this.particles.push(new Particle(this.x, this.y, this.color)); } } } class Particle { constructor(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; this.color = 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.color}, ${this.alpha})`; ctx.fill(); } } let fireworks = []; function createFirework() { const x = Math.random() * canvas.width; const 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(); // 渐变效果 window.onload = function() { const message = document.getElementById('message'); message.style.opacity = 1; }; </script> </body> </html>
ok 新年主题代码告一段落，v1.0.1更新
