原生JS實(shí)現(xiàn)煙花效果

更新時(shí)間：2020年03月10日 15:17:56 作者：烏拉烏拉嘿

這篇文章主要為大家詳細(xì)介紹了原生JS實(shí)現(xiàn)煙花效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

原生JS實(shí)現(xiàn)煙花效果，點(diǎn)擊頁面生成煙花，向四周擴(kuò)散，然后再墜落下去。（這里的煙花我是用的特殊字符愛心形狀）

基礎(chǔ)css代碼

 /* 設(shè)置基礎(chǔ)的css樣式 */
 body{background: #000;overflow: hidden;}
 .fire{position: absolute;width: 4px;height: 30px;}

js代碼：

1、給頁面添加點(diǎn)擊事件，生成主體煙花

 //給頁面設(shè)置點(diǎn)擊事件
 document.onclick = function(eve){
 var e = eve || window.event;
 //設(shè)置一個(gè)空數(shù)組,用來后面存放小煙花
 var arr = [];
 //獲取鼠標(biāo)點(diǎn)擊的位置
 var x = e.clientX;
 var y = e.clientY;
 //設(shè)置步長(zhǎng)
 var speed = 20;
 //生成大煙花,設(shè)置他的css樣式,出發(fā)點(diǎn)在可視區(qū)頁面的下方
 var fire = document.createElement('div');
 fire.className = 'fire';
 fire.style.background = randomColor();
 fire.style.left = x + 'px';
 fire.style.top = document.documentElement.clientHeight+'px';
 //將大煙花追加到頁面上
 document.body.appendChild(fire);

2、設(shè)置定時(shí)器，讓煙花向上運(yùn)動(dòng)，刪除

 //生成定時(shí)器
 var t = setInterval(function(){
 //判斷如果大煙花的TOP值小于小于目標(biāo)值,清除定時(shí)器,并且將大煙花清除
 if(fire.offsetTop <= y){
 clearInterval(t);
 document.body.removeChild(fire);
 //執(zhí)行show(生成小煙花)
 show();
 }
 //讓大煙花垂直向上運(yùn)動(dòng)
 fire.style.top = fire.offsetTop - speed +'px';
 },30);

3、然后在點(diǎn)擊的位置生成小煙花，設(shè)置樣式

function show(){
 //利用循環(huán),生成50個(gè)小煙花,給小煙花添加css屬性
 for(var i=0;i<50;i++){
 var sFire = document.createElement('div');
 // sFire.className = 'small-fire';
 sFire.style.left = x +'px';
 sFire.style.top = y +'px';
 // sFire.style.background = randomColor();
 sFire.style.color = randomColor();
 sFire.innerHTML = '❤';
 sFire.style.position = 'absolute';
 //生成隨機(jī)數(shù)
 var a=Math.random()*360;
 sFire.sx = Math.sin(a*180/Math.PI)*20*Math.random();
 sFire.sy = Math.cos(a*180/Math.PI)*20*Math.random();
 //將小煙花追加到頁面上
 document.body.appendChild(sFire);
 //將生成的煙花信息都添加到數(shù)組中
 arr.push(sFire);
 }
 }

4、設(shè)置定時(shí)器，讓小煙花完成自由落體運(yùn)動(dòng)

setInterval(function move(){
 //利用循環(huán)一直改變小煙花的位置
 for(var i=0;i<arr.length;i++){
 //設(shè)置將每次循環(huán)的第i個(gè)小煙花的運(yùn)動(dòng)范圍
 arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
 arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
 //讓煙花垂直方向的位置每次都增加,實(shí)現(xiàn)下落效果
 arr[i].sy += 1;
 //判斷煙花是否運(yùn)動(dòng)出屏幕可視區(qū),如果是,就將它刪除
 if(arr[i].offsetLeft<0 || arr[i].offsetLeft > document.documentElement.clientWidth || arr[i].offsetTop > document.documentElement.clientHeight){
 document.body.removeChild(arr[i]);
 // arr.splice(i,1);
 }
 }
 },30)
 }

5、最后別忘了我們的隨機(jī)數(shù)和隨機(jī)顏色的封裝

 // 范圍隨機(jī)數(shù)
 function random(max,min){
  return Math.round(Math.random()*(max-min)+min);
 }
 // 隨機(jī)顏色
 function randomColor(){
  return "rgb("+random(0,255)+","+random(0,255)+","+random(0,255)+")";
 }

最后我們的煙花效果就實(shí)現(xiàn)了

今天的分享就到這里，希望大家能夠喜歡。

更多JavaScript精彩特效分享給大家：

Javascript菜單特效大全

javascript仿QQ特效匯總

JavaScript時(shí)鐘特效匯總

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: