2023年跨年烟花-自定义文件-背景音乐-雪花-倒计时源码

共2个文件

js：1个

html：1个

需积分: 5 20 浏览量 2023-01-11 22:30:45 上传评论收藏 10KB ZIP 举报

在这个跨年烟花源码项目中，我们主要涉及的是前端网页开发技术，具体涵盖了JavaScript（js）、CSS（css）以及HTML这三个关键元素。这个项目旨在创建一个动态的、交互式的跨年庆祝页面，其中包括了烟花、雪花效果、背景音乐以及倒计时功能。接下来，我们将深入探讨这些知识点。 1. **HTML 结构**： `index.html` 文件是整个网页的基础，它定义了网页的结构。在这个跨年庆祝页面中，HTML 可能包含了用于显示烟花、雪花、倒计时的容器元素，以及播放背景音乐所需的音频元素。例如： ```html <audio id="backgroundMusic" src="music.mp3" autoplay loop></audio> <div id="countdown"></div> <canvas id="fireworks"></canvas> <canvas id="snowflakes"></canvas> ``` 2. **JavaScript (js)**： JavaScript 是实现动态效果的关键，负责处理用户的交互和页面的实时更新。在本项目中，JavaScript 可能包括以下功能： - **烟花动画**：通过在`<canvas>`元素上绘制图形，实现烟花绽放的效果。这可能涉及到复杂的数学计算，如角度、速度、颜色等。 - **雪花效果**：同样使用`canvas`来绘制不同大小的雪花，随机生成位置和下落速度，营造出飘雪的感觉。 - **倒计时**：JavaScript 可以设置定时器，实时更新倒计时，直至新年到来。 - **音乐控制**：允许用户控制背景音乐的播放、暂停、音量等。 - **自定义文件**：提供接口让用户上传自己的音乐或调整其他设置。 3. **CSS (css)**： CSS 主要负责网页的样式和布局。在这个跨年页面中，CSS 可能包括： - **背景**：设置整个页面的背景颜色或图片，为烟花和雪花提供合适的展示背景。 - **元素定位**：通过`position`属性调整烟花、雪花、倒计时的位置，使其在屏幕上的布局合理美观。 - **动画**：使用`keyframes`创建动画效果，比如烟花爆炸后的闪烁或者雪花飘落的轨迹。 - **响应式设计**：确保页面在不同设备和屏幕尺寸上的表现良好，可能需要利用媒体查询(`@media`)进行调整。 4. **自定义功能**：项目强调了自定义性，用户可以更换背景音乐和调整雪花大小。这通常需要在JavaScript代码中添加对应的用户输入处理逻辑，例如读取用户上传的音频文件并替换当前音乐，或者设置一个输入框让用户输入雪花大小的数值，然后在绘制雪花时应用这些值。 5. **互动体验**：为了增强用户体验，开发者可能还添加了鼠标点击触发烟花的功能，或者根据用户的滚动行为调整烟花和雪花的密度。这个项目综合运用了前端开发的多种技术，旨在为用户创造一个生动、富有节日气氛的跨年庆祝页面。无论是对于学习者还是实践者，都是一个很好的案例，可以从中了解到如何结合HTML、CSS和JavaScript来创建动态、交互的Web应用。

资源推荐

资源详情

资源评论

收起资源包目录

new_year.zip （2个子文件）

index.js 16KB

index.html 20KB

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>时光荏苒，白驹过隙！</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; } </style> </head> <body> <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> <div class="overlay"> <div class="tabs"> <div class="tabs-labels"> <span class="tabs-label">Commands</span ><span class="tabs-label">Info</span ><span class="tabs-label">Share</span> </div> <div class="tabs-panels"> <ul class="tabs-panel commands"></ul> </div> </div> </div> <script> function initVars() { pi = Math.PI; ctx = canvas.getContext("2d"); canvas.width = canvas.clientWidth; canvas.height = canvas.clientHeight; cx = canvas.width / 2; cy = canvas.height / 2; playerZ = -25; playerX = playerY = playerVX = playerVY = playerVZ = pitch = yaw = pitchV = yawV = 0; scale = 600; seedTimer = 0; (seedInterval = 5), (seedLife = 100); gravity = 0.02; seeds = new Array(); sparkPics = new Array(); s = "https://cantelope.org/NYE/"; for (i = 1; i <= 10; ++i) { sparkPic = new Image(); sparkPic.src = s + "spark" + i + ".png"; sparkPics.push(sparkPic); } sparks = new Array(); pow1 = new Audio(s + "pow1.ogg"); pow2 = new Audio(s + "pow2.ogg"); pow3 = new Audio(s + "pow3.ogg"); pow4 = new Audio(s + "pow4.ogg"); frames = 0; } function rasterizePoint(x, y, z) { var p, d; x -= playerX; y -= playerY; z -= playerZ; p = Math.atan2(x, z); d = Math.sqrt(x * x + z * z); x = Math.sin(p - yaw) * d; z = Math.cos(p - yaw) * d; p = Math.atan2(y, z); d = Math.sqrt(y * y + z * z); y = Math.sin(p - pitch) * d; z = Math.cos(p - pitch) * d; var rx1 = -1000, ry1 = 1, rx2 = 1000, ry2 = 1, rx3 = 0, ry3 = 0, rx4 = x, ry4 = z, uc = (ry4 - ry3) * (rx2 - rx1) - (rx4 - rx3) * (ry2 - ry1); if (!uc) return { x: 0, y: 0, d: -1 }; var ua = ((rx4 - rx3) * (ry1 - ry3) - (ry4 - ry3) * (rx1 - rx3)) / uc; var ub = ((rx2 - rx1) * (ry1 - ry3) - (ry2 - ry1) * (rx1 - rx3)) / uc; if (!z) z = 0.000000001; if (ua > 0 && ua < 1 && ub > 0 && ub < 1) { return { x: cx + (rx1 + ua * (rx2 - rx1)) * scale, y: cy + (y / z) * scale, d: Math.sqrt(x * x + y * y + z * z), }; } else { return { x: cx + (rx1 + ua * (rx2 - rx1)) * scale, y: cy + (y / z) * scale, d: -1, }; } } function spawnSeed() { seed = new Object(); seed.x = -50 + Math.random() * 100; seed.y = 25; seed.z = -50 + Math.random() * 100; seed.vx = 0.1 - Math.random() * 0.2; seed.vy = -1.5; //*(1+Math.random()/2); seed.vz = 0.1 - Math.random() * 0.2; seed.born = frames; seeds.push(seed); } function splode(x, y, z) { t = 5 + parseInt(Math.random() * 150); sparkV = 1 + Math.random() * 2.5; type = parseInt(Math.random() * 3); switch (type) { case 0: pic1 = parseInt(Math.random() * 10); break; case 1: pic1 = parseInt(Math.random() * 10); do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1); break; case 2: pic1 = parseInt(Math.random() * 10); do { pic2 = parseInt(Math.random() * 10); } while (pic2 == pic1); do { pic3 = parseInt(Math.random() * 10); } while (pic3 == pic1 || pic3 == pic2); break; } for (m = 1; m < t; ++m) { spark = new Object(); spark.x = x; spark.y = y; spark.z = z; p1 = pi * 2 * Math.random(); p2 = pi * Math.random(); v = sparkV * (1 + Math.random() / 6); spark.vx = Math.sin(p1) * Math.sin(p2) * v; spark.vz = Math.cos(p1) * Math.sin(p2) * v; spark.vy = Math.cos(p2) * v; switch (type) { case 0: spark.img = sparkPics[pic1]; break; case 1: spark.img = sparkPics[parseInt(Math.random() * 2) ? pic1 : pic2]; break; case 2: switch (parseInt(Math.random() * 3)) { case 0: spark.img = sparkPics[pic1]; break; case 1: spark.img = sparkPics[pic2]; break; case 2: spark.img = sparkPics[pic3]; break; } break; } spark.radius = 25 + Math.random() * 50; spark.alpha = 1; spark.trail = new Array(); sparks.push(spark); } switch (parseInt(Math.random() * 4)) { case 0: pow = new Audio(s + "pow1.ogg"); break; case 1: pow = new Audio(s + "pow2.ogg"); break; case 2: pow = new Audio(s + "pow3.ogg"); break; case 3: pow = new Audio(s + "pow4.ogg"); break; } d = Math.sqrt( (x - playerX) * (x - playerX) + (y - playerY) * (y - playerY) + (z - playerZ) * (z - playerZ) ); pow.volume = 1.5 / (1 + d / 10); pow.play(); } function doLogic() { if (seedTimer < frames) { seedTimer = frames + seedInterval * Math.random() * 10; spawnSeed(); } for (i = 0; i < seeds.length; ++i) { seeds[i].vy += gravity; seeds[i].x += seeds[i].vx; seeds[i].y += seeds[i].vy; seeds[i].z += seeds[i].vz; if (frames - seeds[i].born > seedLife) { splode(seeds[i].x, seeds[i].y, seeds[i].z); seeds.splice(i, 1); } } for (i = 0; i < sparks.length; ++i) { if (sparks[i].alpha > 0 && sparks[i].radius > 5) { sparks[i].alpha -= 0.01; sparks[i].radius /= 1.02; sparks[i].vy += gravity; point = new Object(); point.x = sparks[i].x; point.y = sparks[i].y; point.z = sparks[i].z; if (sparks[i].trail.length) { x = sparks[i].trail[sparks[i].trail.length - 1].x; y = sparks[i].trail[sparks[i].trail.length - 1].y; z = sparks[i].trail[sparks[i].trail.length - 1].z; d = (point.x - x) * (point.x - x) + (point.y - y) * (point.y - y) + (point.z - z) * (point.z - z); if (d > 9) { sparks[i].trail.push(point); } } else { sparks[i].trail.push(point); } if (sparks[i].trail.length > 5) sparks[i].trail.splice(0, 1); sparks[i].x += sparks[i].vx; sparks[i].y += sparks[i].vy; sparks[i].z += sparks[i].vz; sparks[i].vx /= 1.075; sparks[i].vy /= 1.075; sparks[i].vz /= 1.075; } else {

评论收藏

内容反馈