当前位置：首页 > news >正文

web前端项目-七彩夜空烟花【附源码】

news 2026/2/4 18:47:06

web前端项目-七彩动态夜空烟花【附源码】

本项目仅使用了HTML，代码简单，实现效果绚丽，且本项目代码直接运行即可实现，无需图片素材，接下来让我们一起实现一场美丽的烟花秀叭

运行效果：鼠标点击和移动可控制烟花方向，烟花颜色自动变化

`HTML`源码

<!DOCTYPE html>
<html dir="ltr" lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<title>Enjoy fireworks</title> <script type="text/javascript" src="http://g.huceo.com/weixin/qw/jquery.min.js"></script><script type="text/javascript">var dataForWeixin = {appId: "gh_ff79a97cd7f3",url: "http://g.huceo.com/weixin/yh/en/",title: "Lonely fireworks shows, if you feel good, please share the wechat！",desc: "Lonely fireworks shows, if you feel good, please share the wechat！"};var onBridgeReady = function(){WeixinJSBridge.on('menu:share:appmessage', function(argv){var infos = $("#infos").text();     WeixinJSBridge.invoke('sendAppMessage', {"appid": dataForWeixin.appId,"img_url": dataForWeixin.TLImg,"img_width": "120","img_height": "120","link": dataForWeixin.url + '?f=wx_hy_bb',"title": infos + dataForWeixin.title,"desc": dataForWeixin.desc });setTimeout(function () {location.href = "http://g.huceo.com/weixin/yh/en/";}, 1500); });WeixinJSBridge.on('menu:share:timeline', function(argv){var infos = $("#infos").text();             WeixinJSBridge.invoke('shareTimeline', {"appid": dataForWeixin.appId,"img_url":dataForWeixin.TLImg,"img_width": "120","img_height": "120","link": dataForWeixin.url + '?f=wx_pyq_bb',"title": infos + dataForWeixin.title,"desc": dataForWeixin.desc});setTimeout(function () {location.href = "http://g.huceo.com/weixin/yh/en/";}, 1500);  });};if(document.addEventListener){document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);}else if(document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady);document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);}   </script>
<style>
body {background: #000;margin: 0;
}canvas {cursor: crosshair;display: block;
}
.STYLE1 {color: #333333}
</style>
</head>
<div style="text-align:center;clear:both"></div>
<canvas id="canvas"><span class="STYLE1">Open IE effect more perfect </span></canvas>
<script>
window.requestAnimFrame = ( function() {return window.requestAnimationFrame ||window.webkitRequestAnimationFrame ||window.mozRequestAnimationFrame ||function( callback ) {window.setTimeout( callback, 1000 / 60 );};
})();
var canvas = document.getElementById( 'canvas' ),ctx = canvas.getContext( '2d' ),cw = window.innerWidth,ch = window.innerHeight,fireworks = [],particles = [],hue = 120,limiterTotal = 5,limiterTick = 0,timerTotal = 80,timerTick = 0,mousedown = false,mx,my;
canvas.width = cw;
canvas.height = ch;
function random( min, max ) {return Math.random() * ( max - min ) + min;
}
function calculateDistance( p1x, p1y, p2x, p2y ) {var xDistance = p1x - p2x,yDistance = p1y - p2y;return Math.sqrt( Math.pow( xDistance, 2 ) + Math.pow( yDistance, 2 ) );
}function Firework( sx, sy, tx, ty ) {this.x = sx;this.y = sy;this.sx = sx;this.sy = sy;this.tx = tx;this.ty = ty;this.distanceToTarget = calculateDistance( sx, sy, tx, ty );this.distanceTraveled = 0;this.coordinates = [];this.coordinateCount = 3;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = Math.atan2( ty - sy, tx - sx );this.speed = 2;this.acceleration = 1.05;this.brightness = random( 50, 70 );this.targetRadius = 1;
}
Firework.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );if( this.targetRadius < 8 ) {this.targetRadius += 0.3;} else {this.targetRadius = 1;}this.speed *= this.acceleration;var vx = Math.cos( this.angle ) * this.speed,vy = Math.sin( this.angle ) * this.speed;this.distanceTraveled = calculateDistance( this.sx, this.sy, this.x + vx, this.y + vy );if( this.distanceTraveled >= this.distanceToTarget ) {createParticles( this.tx, this.ty );fireworks.splice( index, 1 );} else {this.x += vx;this.y += vy;}
}Firework.prototype.draw = function() {ctx.beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1][ 0 ], this.coordinates[ this.coordinates.length - 1][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsl(' + hue + ', 100%, ' + this.brightness + '%)';ctx.stroke();ctx.beginPath();ctx.arc( this.tx, this.ty, this.targetRadius, 0, Math.PI * 2 );ctx.stroke();
}function Particle( x, y ) {this.x = x;this.y = y;this.coordinates = [];this.coordinateCount = 5;while( this.coordinateCount-- ) {this.coordinates.push( [ this.x, this.y ] );}this.angle = random( 0, Math.PI * 2 );this.speed = random( 1, 10 );this.friction = 0.95;this.gravity = 1;this.hue = random( hue - 20, hue + 20 );this.brightness = random( 50, 80 );this.alpha = 1;this.decay = random( 0.015, 0.03 );
}Particle.prototype.update = function( index ) {this.coordinates.pop();this.coordinates.unshift( [ this.x, this.y ] );this.speed *= this.friction;this.x += Math.cos( this.angle ) * this.speed;this.y += Math.sin( this.angle ) * this.speed + this.gravity;this.alpha -= this.decay;if( this.alpha <= this.decay ) {particles.splice( index, 1 );}
}Particle.prototype.draw = function() {ctx. beginPath();ctx.moveTo( this.coordinates[ this.coordinates.length - 1 ][ 0 ], this.coordinates[ this.coordinates.length - 1 ][ 1 ] );ctx.lineTo( this.x, this.y );ctx.strokeStyle = 'hsla(' + this.hue + ', 100%, ' + this.brightness + '%, ' + this.alpha + ')';ctx.stroke();
}function createParticles( x, y ) {var particleCount = 30;while( particleCount-- ) {particles.push( new Particle( x, y ) );}
}
function loop() {requestAnimFrame( loop );hue += 0.5;ctx.globalCompositeOperation = 'destination-out';ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';ctx.fillRect( 0, 0, cw, ch );ctx.globalCompositeOperation = 'lighter';var i = fireworks.length;while( i-- ) {fireworks[ i ].draw();fireworks[ i ].update( i );}var i = particles.length;while( i-- ) {particles[ i ].draw();particles[ i ].update( i );}if( timerTick >= timerTotal ) {if( !mousedown ) {fireworks.push( new Firework( cw / 2, ch, random( 0, cw ), random( 0, ch / 2 ) ) );timerTick = 0;}} else {timerTick++;}if( limiterTick >= limiterTotal ) {if( mousedown ) {fireworks.push( new Firework( cw / 2, ch, mx, my ) );limiterTick = 0;}} else {limiterTick++;}
}canvas.addEventListener( 'mousemove', function( e ) {mx = e.pageX - canvas.offsetLeft;my = e.pageY - canvas.offsetTop;
});canvas.addEventListener( 'mousedown', function( e ) {e.preventDefault();mousedown = true;
});canvas.addEventListener( 'mouseup', function( e ) {e.preventDefault();mousedown = false;
});window.onload = loop;
</script>
<audio autoplay="autoplay">
<source src="http://www.sypeiyin.cn/Uploads/zh/News/2012071516257FJR.mp3" type="audio/mpeg">
</audio>

注意： 本项目代码直接运行即可实现，无需图片素材

web前端项目-七彩夜空烟花【附源码】

web前端项目-七彩动态夜空烟花【附源码】本项目仅使用了HTML，代码简单，实现效果绚丽，且本项目代码直接运行即可实现，无需图片素材，接下来让我们一起实现一场美丽的烟花秀叭运行效果：鼠标点击和移动可控制…...

编程日记 2023/12/28 0:45:20

在k8s中将gitlab-runner的运行pod调度到指定节点

本篇和前面的基于helm的方式在k8s集群中部署gitlab 具有很强的关联性，因此如果有不明白的地方可以查看往期分享： 基于helm的方式在k8s集群中部署gitlab - 部署基于helm的方式在k8s集群中部署gitlab - 备份恢复基于helm的方式在k8s集群中部署gitlab - 升…...

编程日记 2023/12/28 0:42:18

1.解决父组件传数据给子组件太慢，导致子组件获取不到合适数据渲染出错问题2.vue中props传递异步数据，子组件用watch监听

vue中props传递异步数据，子组件用watch监听...

编程日记 2023/12/28 0:41:17

SpringMVC之获取请求参数和域对象共享数据

学习的最大理由是想摆脱平庸，早一天就多一份人生的精彩；迟一天就多一天平庸的困扰。各位小伙伴，如果您： 想系统/深入学习某技术知识点… 一个人摸索学习很难坚持，想组团高效学习… 想写博客但无从下手，急需…...

编程日记 2023/12/28 0:39:15

IntelliJ IDEA Community（社区版）下载及安装自用版

IntelliJ IDEA Community（社区版）下载及安装自用版估计是个开发都逃脱不了用IDEA的命运吧，这么好的软件，白嫖了好多年。感恩。现在很多公司已经不让用商业版的破解版了，所以这里讲的是社区版。区别： 商…...

编程日记 2023/12/28 0:38:14

【C语言：编译、预处理详解】

文章目录 1.编译2.预处理2.1宏定义2.1.1预定义符号2.1.2#define定义常量2.1.3#define定义宏2.1.4do-while-zero2.1.5宏的注意事项2.1.6宏与函数的对比 2.2条件编译2.3文件包含 3.offsetoff4.#与##4.1. #号4.2 ##号 1.编译我们都知道，一个程序如果想运行起来要经过…...

编程日记 2023/12/28 0:37:12

【宇宙猜想】AR文创入驻今日美术馆、北京天文馆等众多展馆，在AR互动中感受科技魅力！

近日，由「宇宙猜想」推出的AR系列文创产品先后入驻今日美术馆、北京天文馆、国家自然博物馆、上海天文馆、国家海洋馆、中华手工展馆等各大馆场并与其展开相关合作。「宇宙猜想」致力于创造虚拟空间价值，用AR技术与文创产品碰撞出新的火花，为…...

编程日记 2023/12/28 0:32:07

前端面试题html

HTML DOCTYPE有什么作用？ DOCTYPE是一种指示浏览器以何种HTML或XHTML规范来解析文档的声明。它能够告知浏览器网页文档使用的标记语言的类型以及版本，从而确保浏览器能够正确地展示网页内容。DOCTYPE声明通常位于HTML文档的开头，是HTML文档…...

编程日记 2023/12/28 0:30:06

AOSP源码下载方法，解决repo sync错误：android-13.0.0_r82

篇头最近写文章，反复多次折腾AOSP代码，因通过网络repo sync aosp代码，能一次顺利下载的概率很低，以前就经常遇到，但从未总结，导致自己也要回头检索方法，所以觉得可以总结一下，涉及…...

编程日记 2023/12/28 0:26:03

TCP:IP原理

TCP/IP 原理 TCP/IP 协议不是 TCP 和 IP 这两个协议的合称，而是指因特网整个 TCP/IP 协议族。从协议分层模型方面来讲，TCP/IP 由四个层次组成：网络接口层、网络层、传输层、应用层。网络访问层(Network Access Layer) 网络访问层(Network …...

编程日记 2023/12/28 0:23:00

Java 中 Lambda 表达式的使用

目录一、Lambda 表达式的概念二、Lambda 表达式的语法格式三、Lambda 表达式的案例使用 1、使用 Lambda 来实现启动线程 2、使用 Lambda 表达式实现集合的排序 3、使用 Lambda 表达式实现文件夹下的文件查找一、Lambda 表达式的概念 Lambda 表达式是特殊的匿名内部类…...

编程日记 2023/12/28 0:10:47

【IO】IO模型与零拷贝

前言： 正在运行的程序其实就是系统中的一个进程，操作系统会为每一个进程分配内存空间，而内存空间分为两部分，一部分是用户空间，这是用户进程访问的内存区域；另一部分是内核空间，是操作系统内核访…...

编程日记 2023/12/28 0:08:45

鸿蒙 - arkTs：状态管理

状态 State： 在声明式UI中，以状态驱动视图更新状态（State）：指驱动视图更新的数据（被装饰器标记的变量）视图（View）：基于UI描述渲染得到的用户界面使用示例…...

编程日记 2023/12/28 0:02:40

YOLOv5-Lite 树莓派4B 15帧教程

【前言】由于v5Lite仓库遗漏了不少历史问题，最大的问题是毕业后卷起来了，找不到时间更新。上面是这篇博客的背景，那么先说下结论，使用 v5lite-e 模型，在树莓派4B（4G内存） 上，有三…...

编程日记 2023/12/28 0:01:39

2014年第三届数学建模国际赛小美赛A题吹口哨解题全过程文档及程序

2014年第三届数学建模国际赛小美赛 A题吹口哨原题再现： 哨子是一种小装置，当空气被迫通过开口时会发出声音。哨声的巨大而引人注目，使其对警察和体育裁判来说至关重要。当救生员、迷路的露营者或犯罪受害者使用它们时，它们可以…...

编程日记 2023/12/27 23:59:37

设计模式-注册模式

设计模式专栏模式介绍模式特点应用场景注册模式和单例模式的区别代码示例Java实现注册模式Python实现注册模式注册模式在spring中的应用模式介绍注册模式是一种设计模式，也称为注册树或注册器模式。这种模式将类的实例化和创建分离开来，避免在应用程…...

编程日记 2023/12/27 23:53:32

css 美化滚动条样式

ChatgGPT4.0国内站点: 海鲸AI-支持GPT(3.5/4.0)，文件分析，AI绘图在CSS中，你可以使用伪元素::-webkit-scrollbar以及相关的伪元素来为Webkit浏览器（如Chrome和Safari）自定义滚动条的样式。以下是一些基本的CSS规则&am…...

编程日记 2023/12/27 23:52:31

视频压缩不影响画质简单方法，一分钟搞定！

很多朋友在处理视频的时候都会遇到视频过大的问题，想要压缩视频的同时不影响画质，简单的方法有两种。一种是用专业的压缩软件，在压缩的时候设置一个合适的压缩比例，压缩大小的同时保持清晰度，也能提高压缩率&#xff0…...

编程日记 2023/12/27 23:50:29

Zookeeper的使用场景

统一命名服务利用ZooKeeper节点的树形分层结构和子节点的顺序维护能力，来为分布式系统中的资源命名。例：分布式节点命名分布式消息队列 1.在Zookeeper中创建一个持久节点，用作队列的根节点。队列元素的节点放在这个根节点下。 2.入队:…...

编程日记 2023/12/27 23:48:28

Java 面试题集锦记录

Java 面试题集锦记录一1. SpringBoot、SpringCloud区别2. SpringCloud怎么保证服务间通信？3. Spring怎么保持高可用性、稳定性？4. 负载均衡5. [Rabbitmq](https://blog.csdn.net/qq_40985985/article/details/128013229) 怎么避免重复消费，[…...

编程日记 2023/12/27 23:45:24

Ubuntu系统下交叉编译openssl

一、参考资料 OpenSSL&&libcurl库的交叉编译 - hesetone - 博客园二、准备工作 1. 编译环境宿主机：Ubuntu 20.04.6 LTSHost：ARM32位交叉编译器：arm-linux-gnueabihf-gcc-11.1.0 2. 设置交叉编译工具链在交叉编译之前&#x…...

编程新知 2025/11/10 15:33:04

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器直接处理静态资源（HTML/CSS/图片等），响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器隐藏后端服务器IP地址，提高安全性 3.负载均衡服务器支持多种策略分发流量…...

编程新知 2026/1/18 3:11:35

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题安装 flash-attn 会一直卡在 build 那一步或者运行报错解决办法是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...

编程新知 2025/11/3 2:11:24

Rust 异步编程

Rust 异步编程引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。异步编程基础什么是异步…...

编程新知 2025/11/17 18:58:56

【HTTP三个基础问题】

面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...

编程新知 2025/12/10 6:18:55

Linux nano命令的基本使用

参考资料 GNU nanoを使いこなすnano基础目录一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件三. 文件查看3.1 打开文件时，显示行号3.2 翻页查看四. 文件编辑4.1 Ctrl K 复制和 Ctrl U 粘贴4.2 Alt/Esc U 撤回五. 文件保存与退出5.1 Ctrl …...

编程新知 2026/1/31 2:17:41

【 java 虚拟机知识第一篇】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍内存模型主要分…...

编程新知 2026/1/31 8:12:12

C++--string的模拟实现

一,引言 string的模拟实现是只对string对象中给的主要功能经行模拟实现，其目的是加强对string的底层了解，以便于在以后的学习或者工作中更加熟练的使用string。本文中的代码仅供参考并不唯一。二,默认成员函数 string主要有三个成员变量，…...

编程新知 2026/1/26 19:02:17

命令行关闭Windows防火墙

命令行关闭Windows防火墙引言一、防火墙：被低估的"智能安检员"二、优先尝试！90%问题无需关闭防火墙方案1：程序白名单（解决软件误拦截）方案2：开放特定端口（解决网游/开发端口不通）三、命令行极速关闭方案方法一：PowerShell（推荐Win10/11）方法二：CMD命令…...

编程新知 2025/8/27 20:07:03

web前端项目-七彩动态夜空烟花【附源码】

HTML源码

相关文章：

`HTML`源码