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

 //給頁面設(shè)置點(diǎn)擊事件
 document.onclick = function(eve){
 var e = eve || window.event;
 //設(shè)置一個空數(shù)組,用來后面存放小煙花
 var arr = [];
 //獲取鼠標(biāo)點(diǎn)擊的位置
 var x = e.clientX;
 var y = e.clientY;
 //設(shè)置步長
 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);

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

function show(){
 //利用循環(huán),生成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';
 //生成隨機(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);
 }
 }

setInterval(function move(){
 //利用循環(huán)一直改變小煙花的位置
 for(var i=0;i<arr.length;i++){
 //設(shè)置將每次循環(huán)的第i個小煙花的運(yùn)動范圍
 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)動出屏幕可視區(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)
 }

 // 范圍隨機(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)+")";
 }