生活随笔
收集整理的這篇文章主要介紹了
原生js实现炫酷烟花效果
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
試著用js做了一個煙花功能，建議不要把數量和速度調太高，否則直接卡死，下面是效果圖
可以加小球數量，范圍和時間，時間越少速度越快
如果時間變成負數很大概率卡死
圖中小點就是將要綻開的煙花
小球的大小也是可控的，這里面都可以設置
var Number
= 20 var magnitude
= 150 const size
= [10, 15] const velocity
= 1; var timeli
= 1; var 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
>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 const size
= [10, 15] const velocity
= 1; var timeli
= 1; var 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
= !sotp
if (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实现炫酷烟花效果的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
