使用JavaScript怎么實現一個煙花效果

使用JavaScript怎么實現一個煙花效果？針對這個問題，這篇文章詳細介紹了相對應的分析和解答，希望可以幫助更多想解決這個問題的小伙伴找到更簡單易行的方法。

基礎css代碼

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

js代碼：

1、給頁面添加點擊事件，生成主體煙花

 //給頁面設置點擊事件
 document.onclick = function(eve){
 var e = eve || window.event;
 //設置一個空數組,用來后面存放小煙花
 var arr = [];
 //獲取鼠標點擊的位置
 var x = e.clientX;
 var y = e.clientY;
 //設置步長
 var speed = 20;
 //生成大煙花,設置他的css樣式,出發點在可視區頁面的下方
 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、設置定時器，讓煙花向上運動，刪除

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

3、然后在點擊的位置生成小煙花，設置樣式

function show(){
 //利用循環,生成50個小煙花,給小煙花添加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';
 //生成隨機數
 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);
 //將生成的煙花信息都添加到數組中
 arr.push(sFire);
 }
 }

4、設置定時器，讓小煙花完成自由落體運動

setInterval(function move(){
 //利用循環一直改變小煙花的位置
 for(var i=0;i<arr.length;i++){
 //設置將每次循環的第i個小煙花的運動范圍
 arr[i].style.left = arr[i].offsetLeft + arr[i].sx + 'px';
 arr[i].style.top = arr[i].offsetTop + arr[i].sy + 'px';
 //讓煙花垂直方向的位置每次都增加,實現下落效果
 arr[i].sy += 1;
 //判斷煙花是否運動出屏幕可視區,如果是,就將它刪除
 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、最后別忘了我們的隨機數和隨機顏色的封裝

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

關于使用JavaScript怎么實現一個煙花效果問題的解答就分享到這里了，希望以上內容可以對大家有一定的幫助，如果你還有很多疑惑沒有解開，可以關注億速云行業資訊頻道了解更多相關知識。