JS如何實現(xiàn)放煙花效果

這篇文章給大家分享的是有關(guān)JS如何實現(xiàn)放煙花效果的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

成都網(wǎng)絡(luò)公司-成都網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)十余年經(jīng)驗成就非凡，專業(yè)從事網(wǎng)站制作、成都做網(wǎng)站，成都網(wǎng)頁設(shè)計，成都網(wǎng)頁制作，軟文發(fā)布平臺，廣告投放等。十余年來已成功提供全面的成都網(wǎng)站建設(shè)方案，打造行業(yè)特色的成都網(wǎng)站建設(shè)案例，建站熱線：18982081108，我們期待您的來電！

具體內(nèi)容如下

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>放煙花——欣欣博客</title>
 <style>
 html,body{overflow:hidden;}
 body,div,p{margin:0;padding:0;}
 body{background:#000;font:12px/1.5 arial;color:#7A7A7A;}
 .fire {
 width: 3px;
 height: 30px;
 background: white;
 position: absolute;
 } 
 .spark {
 position: absolute;
 width: 6px;
 height: 6px;
 }
 </style>
 <script src="move.js"></script>
 <script>
 οnlοad=function(){
 document.οnclick=function(e){
  e =e||event;
  var coord ={
  x:e.clientX,
  y:e.clientY
  };
  new Fire(coord).init().launch();
 }
 
 function Fire(coord){
  var self = this;
  //初始化
  this.init=function(){
  this.ball = document.createElement("div");
  this.ball.className="fire";
  this.ball.style.left = coord.x+"px";
  this.ball.style.top= window.innerHeight +"px";
  document.body.appendChild(this.ball);
  return this;
  }
  //發(fā)射
  this.launch=function(){
  
  animate(this.ball,{left:coord.x,top:coord.y,height:3},{callback:function(){
  self.explode();
  }});  
  return this;
  }
  //爆炸
  this.explode=function(){
  this.destory();
  var count = randomInt(30,50);
  for(var i =0;i<count;i++){
  new Spark(coord).init().parabola();
  }
  }
  //銷毀
  this.destory = function(){
  this.ball.remove();
  }
 }
 function Spark(coord){
  var self = this;
  this.init=function(){
  this.box = document.createElement("div");
  this.box.className="spark";
  this.box.style.backgroundColor="#"+randomColor();
  console.log(this.box.style.backgroundColor)
  this.box.style.left = coord.x+"px";
  this.box.style.top = coord.y+"px";
  this.box.speedX = randomInt(-20,20);
  this.box.speedY = randomInt(-20,10);
  document.body.appendChild(this.box);
  return this;
  }
  this.parabola=function(){
  
  this.timer =setInterval(function(){
  if(self.box.offsetTop >window.innerHeight){
  clearInterval(self.timer);
  self.destroy();
  return;
  }
  self.box.style.left = self.box.offsetLeft + self.box.speedX +"px";
  self.box.style.top = self.box.offsetTop +self.box.speedY++ +"px";
  
  },30)
  
  }
  this.destory=function(){
  this.box.remove();
  }
  
  
 }
 
 //隨機整數(shù)
 function randomInt(min,max){
  return Math.round(Math.random()*(max-min)+min);
 }
 //隨機顏色
 function randomColor(){
  var R = Math.round( Math.random()*255 ).toString(16);
  var G = Math.round( Math.random()*255 ).toString(16);
  var B = Math.round( Math.random()*255 ).toString(16);
  return (R.length<2?"0"+R:R) + (G.length<2?"0"+G:G)+ (B.length<2?"0"+B:B);
 }
 }
 </script>
 </head>
 <body>
 
 </body>
</html>

move.js

/**
 * 
 * @param {Object} obj 目標對象
 * @param {Object} json 要改變的屬性
 * @param {Object} extend {buffer,callback} 當buffer為true時為彈性運動
 * callback會在運動結(jié)束時，被執(zhí)行
 * animate(obj, {top:500, left: 300}, {callback:function(){}, buffer: true})
 */
function animate(obj, json, extend){
 extend = extend || {};
 if(obj.isMoving){
 return;
 } else {
 stop();
 obj.isMoving = true;
 }
 //obj = Object.assgin(obj,extend);
 obj.buffer = extend.buffer;
 obj.callback = extend.callback;
 obj.timerlist = {};
 //為每一個屬性添加一個定時器
 for(var attr in json){
 (function(attr){
 obj.timerlist[attr] = {speed:0};
 obj.timerlist[attr].timer = setInterval(function(){
 //首先得到當前值
 var iNow = 0;
 if(attr == "opacity"){
  iNow = getStyle(obj, attr) * 100; 
 } else {
  iNow = getStyle(obj, attr);
 }
 var speed = obj.timerlist[attr].speed;
 //根據(jù)目標值，計算需要的速度
 if(obj.buffer==true){
  speed += (json[attr] - iNow)/5;
  speed *= 0.75;
 } else {
  speed = (json[attr] - iNow)/5;
 }
 //當無限接近目標值時，停止定時器
 if(Math.abs(iNow - json[attr]) < 0.5){
  clearInterval(obj.timerlist[attr].timer);
  delete obj.timerlist[attr];
  if(getObjLength(obj.timerlist)==0){//所有定時器已停止
  stop();
  obj.callback ? obj.callback() : "";
  }
 } else {
  //根據(jù)速度，修改當前值
  if(attr == "opacity"){
  obj.style.opacity = (iNow+speed)/100;
  obj.style.filter = 'alpha(opacity=' + parseFloat(iNow+speed) + ')'; 
  } else {
  obj.style[attr] = iNow+speed+"px";
  }
  obj.timerlist[attr].speed = speed;
 }
 }, 30);
 })(attr);
 }
 
 function clearTimer(){
 for(var i in obj.timerlist){
 clearInterval(obj.timerlist[i]);
 }
 }
 function getStyle(obj, attr){
 if(obj.currentStyle){
 return isNaN(parseFloat(obj.currentStyle[attr])) ? obj.style[attr]=0 : parseFloat(obj.currentStyle[attr]);
 } else {
 return isNaN(parseFloat(getComputedStyle(obj, null)[attr])) ? obj.style[attr]=0 : parseFloat(getComputedStyle(obj, null)[attr]);
 }
 }
 function getObjLength(obj){
 var n = 0;
 for(var i in obj){
 n++;
 }
 return n;
 }
 function stop(){
 clearTimer();//清除所有定時器
 obj.isMoving = false;
 }
}

感謝各位的閱讀！關(guān)于“JS如何實現(xiàn)放煙花效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

標題名稱：JS如何實現(xiàn)放煙花效果
文章來源：http://m.kartarina.com/article16/jeopdg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、網(wǎng)站維護、外貿(mào)建站、網(wǎng)站改版、、App設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容