原生js实现炫酷烟花效果

试着用js做了一个烟花功能，建议不要把数量和速度调太高，否则直接卡死，下面是效果图

可以加小球数量，范围和时间，时间越少速度越快

如果时间变成负数很大概率卡死
图中小点就是将要绽开的烟花

小球的大小也是可控的，这里面都可以设置

  var Number = 20 //数量  太大会奔溃var magnitude = 150 //绽放大小范围 PXconst size = [10, 15] //小球大小范围 PXconst velocity = 1;  //停留时间  Svar timeli = 1;  //烟花发射速度 Svar sotp = false  //停止烟花var timeList ; //计时器

下面是代码
很多东西可以简写，比较懒就复制粘贴了

<!DOCTYPE html>
<html lang="en">
<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"/><title>demo</title><style>* {padding: 0;margin: 0;}.body {width: 100vw;height: 100vh;background-color: #fff;}.bondsman {display: block;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);}.div {transform: translate(-50%, -50%);position: fixed;direction: revert;}.span {position: fixed;width: 2px;background: #0a0a0a;height: 10px;}#button {position: fixed;transform: translate(-50%, -50%);left: 20%;bottom: 10%;border: none;z-index: 999;height: 60px;line-height: 60px;width: 120px;}#button1 {position: fixed;transform: translate(-50%, -50%);left: 40%;bottom: 10%;border: none;z-index: 999;height: 60px;line-height: 60px;width: 120px;}#button2 {position: fixed;transform: translate(-50%, -50%);left: 60%;bottom: 10%;border: none;z-index: 999;height: 60px;line-height: 60px;width: 120px;}#button3 {position: fixed;transform: translate(-50%, -50%);left: 80%;bottom: 10%;border: none;z-index: 999;height: 60px;line-height: 60px;width: 120px;}button:active{ box-shadow: 0px 0px 50px #F60 inset; color:#fff; }</style>
</head>
<body class="body">
<button onclick="bottom()" id="button">开始</button>
<button onclick="bottom1()" id="button1">加球</button>
<button onclick="bottom2()" id="button2">加范围</button>
<button onclick="bottom3()" id="button3"> 加速</button>
</body>
<script>// 鼠标点击出现一样的烟花// var num = 1// document.body.onclick = function (e) {//     num++//     method(e.clientX, e.clientY,num);// };const list = ["red", "yellow", "green", "blue", "orange", "black","LightPink","Magenta","DarkSlateBlue","MediumBlue","DoderBlue","PaleGodenrod","Salmon","IndianRed","Maroon","DimGray","OrangeRed","LightSalmon","Chocolate","DarkGreen","Lime","Gold","Magenta","LawnGreen","MediumBlue","RoyalBlue","PaleGreen","SeaGreen","Turquoise","DarkTurquoise","DeepSkyBlue","Aqua","LightGoldenrodYellow"]; //颜色var Number = 20 //数量  太大会奔溃var magnitude = 150 //绽放大小范围 PXconst size = [10, 15] //小球大小范围 PXconst velocity = 1;  //停留时间  Svar timeli = 1;  //烟花发射速度 Svar sotp = false  //停止烟花var timeList ; //计时器const buttom = document.getElementById('button')const buttom1 = document.getElementById('button1')const buttom2= document.getElementById('button2')const buttom3 = document.getElementById('button3')function method(x, y,e) {const box = document.createElement("div");box.className = 'div'box.id = 'item'+ebox.style.left = x + "px";box.style.top = y + "px";box.style.width = magnitude + "px"box.style.height = magnitude + "px"document.body.appendChild(box);const div = document.getElementById(`item${e}`)for (let i = 0; i < Number; i++) {const index = Math.floor(Math.random() * list.length);const a = Math.floor(Math.random() * (size[0] - size[1])) + size[1]const color = list[index];const bondsman = document.createElement("span");bondsman.classList.add("bondsman");bondsman.style.background = color;bondsman.style.left = '50%';bondsman.style.top = '50%';bondsman.style.width = a + 'px';bondsman.style.height = a + 'px';bondsman.style.transition = velocity + 's';bondsman.style.opacity = 0div.appendChild(bondsman);}const time = velocity * 1000const span = div.getElementsByClassName("bondsman");setTimeout(() => {for (let i = 0; i < span.length; i++) {if (Math.round(Math.random())) {span[i].style.left = Math.floor(Math.random() * (100 - 0)) + 0 + '%'span[i].style.top = Math.floor(Math.random() * (100 - 0)) + 0 + '%'span[i].style.opacity = 1} else {span[i].style.left = Math.floor(Math.random() * (100 - 0)) + 0 + '%'span[i].style.top = Math.floor(Math.random() * (100 - 0)) + 0 + '%'span[i].style.opacity = 1}setTimeout(() => {span[i].style.opacity = 0;}, time / 2)}}, 100)setTimeout(() => {document.body.removeChild(div)}, time + 100)}function wire(e) {return new Promise((resolve)=>{const box = document.createElement("div");box.className = 'span'box.id = 'index'+ebox.style.left = Math.floor(Math.random() * (90 - 10)) + 10 + '%'box.style.top = '100%'box.style.transition = velocity + 's'box.opacity = 0;document.body.appendChild(box);const span = document.getElementById(`index${e}`)setTimeout(() => {span.style.top = Math.floor(Math.random() * (50 - 15)) + 15 + '%'}, 200)setTimeout(() => {span.opacity = 1;}, 300)setTimeout(() => {let data = {span:span,e:e}resolve(data)}, velocity * 1000 + 100)})}function bottom(){sotp = !sotpif (sotp) {I = 0timeList = setInterval(() => {wire(I++).then((data)=>{method(data.span.offsetLeft, data.span.offsetTop,data.e)setTimeout(()=>{document.body.removeChild(data.span)},100)})}, timeli*1000)} else {console.log('清除')clearInterval(timeList)}sotp? buttom.innerText="结束" :buttom.innerHTML="开始"}function bottom1(){Number = Number+10buttom1.innerText="当前"+Number+'个'}function bottom2(){magnitude = magnitude+50buttom2.innerText="当前范围"+magnitude +'px'}function bottom3(){console.log(timeli)timeli = ( timeli*1000-100)/1000console.log(timeli)buttom3.innerText="当前速度"+timeli+'s'}

小白一个，多多关照

原生js实现炫酷烟花效果相关推荐

【html+css+原生js实现炫酷照片展开效果-----女友相册的正确打开方式（详细）】
1.先看效果.有动画效果,截图效果不大明显.copy代码运行可以展示完整效果. 2.html页面 <!DOCTYPE html> <html><head><m ...
js实现炫酷数字效果
/*** 产生一个随机整数,范围是min~max之间* @param {*} min 最小值* @param {*} max 最大值,取不到最大值*/ function getRandom(min, ...
跨年炫酷烟花效果代码带声音已附源码
效果图展示: 源码代码: <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
css 特效火球光,JS+CSS实现炫酷光感效果
JS+CSS带你实现炫酷光感效果,供大家参考,具体内容如下效果一:(螺旋式沉浸视觉感受) 效果二:(旋涡式远观视觉感受) 实现代码: 光感效果 html,body{ height: 100%; ov ...
HTML+CSS+JS制作炫酷【烟花特效】
文章目录制作炫酷烟花特效一.普通烟花(分散形) HTML代码 CSS代码 JS代码二.圆形烟花 HTML代码 CSS代码 JS代码三.爱心形烟花 HTML代码 CSS代码 JS代码四.源码获 ...
元旦到了，手把手教你用 Python 制作一个炫酷烟花秀
大家好,我是小张, 今天是2021 的最后一天,到了这个时间点,部分小伙伴已经开始复盘这一年的得与失.比如今年增加了多少技能点,看了多少本书,写了多少篇文章或者年前的小目标实现进度大概多少等等:做一个 ...
【python教程入门学习】Python新年炫酷烟花秀代码
先介绍下 Pygame 绘制烟花的基本原理,烟花从发射到绽放一共分为三个阶段: 1,发射阶段:在这一阶段烟花的形状是线性向上,通过设定一组大小不同.颜色不同的点来模拟"向上发射" ...
Mapbox GL JS实现炫酷的地图背景
经常看到网上的各种地图,有着炫酷的地图背景,用户体验非常不错.在Mapbox GL JS这块,其实关于地图的背景没有太多的设置.但当我们想基于Mapbox GL JS实现炫酷的地图背景改怎么办呢?这里 ...
RecyclerView + SnapHelper实现炫酷ViewPager效果
目录什么是SnapHelper SnapHelper是Google 在 Android 24.2.0 的support 包中添加的对RecyclerView的拓展,结合RecyclerView使用, ...

原生js实现炫酷烟花效果

原生js实现炫酷烟花效果相关推荐

最新文章

热门文章