非常漂亮的js煙花效果
更新時(shí)間：2020年03月10日 15:33:24 作者：Maple－軒
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)非常漂亮的煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)漂亮煙花效果的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>煙花</title>
<style type="text/css">
div>div{
width:10px;
height:10px;
border-radius: 50%;
position: absolute;
top:900px;
left:600px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"><div id="start"></div></div>
</body>
<script type="text/javascript">
var sta = 800;
var staa = 8;
var startid = setInterval(function (){
start.style.top = (sta-=staa)+"px";
staa -=0.06;
if(staa<=0.5){
clearInterval(startid);
start.style.display="none";
za();
}
},10);
var g = 0.01;
var lv = 0;
var times = 0;
var opa =1;
function za(){
addiv();
var s2 = setInterval(function(){
lv+=g;
for(var i=0;i<200;i++){
var elem = document.getElementById("d"+i);
elem.style.left = (arrl[i]+=(arrv[i]*Math.cos(arrr[i])))+"px";
elem.style.top = (arrt[i]+=(arrv[i]*Math.sin(arrr[i])+lv))+"px";
elem.style.opacity= (opa-=0.00001);
if(arrv[i]>0)
arrv[i]-=0.001;
else arrv[i]=0;
}
if(times++>=1000) clearInterval(s2);
},10);
}
var arrr = [];
var arrl = [];
var arrt = [];
var arrv = [];
var arro = []
function addiv(){
for(var i=0;i<200;i++){
box.innerHTML+="<div id='d"+i+"'></div>"
arrl[i]=600;
arrt[i]=sta;
arrv[i]=Math.random()*2+0.1;
arrr[i]=Math.random()*Math.PI*2;
}
}
</script>
</html>
更多JavaScript精彩特效分享給大家：
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS小技巧之通過(guò)字符串追加元素方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)圖片輪播代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
JS字符串分割方法整理匯總示例講解（3種截取方法和6個(gè)輔助方法）
JavaScript在開(kāi)發(fā)中常常會(huì)需要截取字符串，而JS提供了slice()?、substring()、substr()?3種方法實(shí)現(xiàn)截取操作。另外還有字符串相關(guān)的6種輔助方法：indexOf()、lastIndexOf()、split()、join()、concat()、charAt()?。2023-02-02
JavaScript console的使用方法實(shí)例分析
這篇文章主要介紹了JavaScript console的使用方法,結(jié)合實(shí)例形式分析了JavaScript console的使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-04-04
這篇文章主要介紹了AutoJs實(shí)現(xiàn)刷寶短視頻的思路詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
如何禁止拷貝網(wǎng)頁(yè)內(nèi)容，想維護(hù)下自己的版權(quán)，下面有個(gè)不錯(cuò)的方法，大家可以學(xué)習(xí)下2014-01-01
JavaScript Serializer序列化時(shí)間處理示例
JavaScriptSerializer序列化時(shí)間后會(huì)把時(shí)間序列化成N進(jìn)制的鬼數(shù)據(jù) ，下面有個(gè)示例，需要的朋友可以了解下2014-07-07
用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼
用Javascript判斷圖片是否存在，不存在則顯示默認(rèn)圖片的代碼,需要的朋友可以參考下。2007-03-03
uniapp項(xiàng)目引入?js文件以及全局使用方法
這篇文章主要給大家介紹了關(guān)于uniapp項(xiàng)目引入?js文件以及全局使用方法的相關(guān)資料,在Uniapp中引入JS文件是一項(xiàng)常見(jiàn)的操作,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
這篇文章主要介紹了JavaScript常用的Hook腳本,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03