非常漂亮的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精彩特效分享給大家：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js防抖具體實(shí)現(xiàn)以及詳細(xì)原理步驟說明(附實(shí)例)
節(jié)流和防抖這里兩個(gè)詞可能對一些初入JavaScript的同學(xué)比較陌生,下面這篇文章主要給大家介紹了關(guān)于js防抖具體實(shí)現(xiàn)以及詳細(xì)原理步驟的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡單實(shí)例
本篇文章主要是對javascript實(shí)現(xiàn)數(shù)字驗(yàn)證碼的簡單實(shí)例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
利用js實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示訪問者在本頁停留的時(shí)間
本文為大家介紹下利用JavaScript實(shí)現(xiàn)在瀏覽器狀態(tài)欄顯示停留時(shí)間即在狀態(tài)欄上顯示訪問者在本頁停留的時(shí)間2013-12-12
Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解
這篇文章主要介紹了Javascript數(shù)據(jù)結(jié)構(gòu)與算法之列表詳解,本文講解了列表的抽象數(shù)據(jù)類型定義、如何實(shí)現(xiàn)列表類等內(nèi)容,需要的朋友可以參考下2015-03-03
JavaScript-html標(biāo)題滾動(dòng)效果的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄狫avaScript-html標(biāo)題滾動(dòng)效果的簡單實(shí)現(xiàn)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-09-09
JavaScript模塊管理的簡單實(shí)現(xiàn)方式詳解
這篇文章主要介紹了JavaScript模塊管理的簡單實(shí)現(xiàn)方式,它方便組織你的代碼，提高項(xiàng)目的可維護(hù)性。一個(gè)項(xiàng)目的可維護(hù)性高不高，也體現(xiàn)一個(gè)程序員的水平，在如今越來越復(fù)雜的前端項(xiàng)目，這一點(diǎn)尤為重要。,需要的朋友可以參考下2019-06-06
通過js腳本復(fù)制網(wǎng)頁上的一個(gè)表格的不錯(cuò)實(shí)現(xiàn)方法
通過js腳本復(fù)制網(wǎng)頁上的一個(gè)表格的不錯(cuò)實(shí)現(xiàn)方法...2006-12-12
JavaScript設(shè)計(jì)模式之策略模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之策略模式實(shí)例,本文分析了Jquery源碼并給出了自己的實(shí)現(xiàn),需要的朋友可以參考下2014-10-10
前端利用PrintJs實(shí)現(xiàn)批量打印文件功能
在項(xiàng)目中遇到一個(gè)問題需要實(shí)現(xiàn)批量打印功能,研究了測試了一番解決了,把相關(guān)的功能記錄下,這篇文章主要介紹了前端利用PrintJs實(shí)現(xiàn)批量打印文件功能的相關(guān)資料,需要的朋友可以參考下2025-02-02
我想在頁面里把想要的關(guān)鍵詞加亮凸出(用顏色區(qū)分出來)顯示,這樣讓客戶一眼能看到重的東西,然后在加亮的關(guān)鍵詞上可以加上超連接.請問高手們怎么實(shí)現(xiàn)宋的功能.就像搜索引擎的那種..搜索關(guān)鍵詞的時(shí)候就顯示紅色的.2008-06-06