JS基于面向对象实现的放烟花效果 效果显示（上升图片）： 效果显示（绽放图片）： 效果显示（视频）： OOA 1.选中元素,点击事件,记录鼠标位置 2.创建主体烟花 3.初始化主体烟花 4.主
JS基于面向对象实现的放烟花效果
效果显示（上升图片）：
效果显示（绽放图片）：
效果显示（视频）：
OOA
1.选中元素,点击事件,记录鼠标位置
2.创建主体烟花
3.初始化主体烟花
4.主体烟花运动
OOD
选中元素,点击事件,记录鼠标位置
//主体部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 #container{ 8 width: 80%; 9 height: 600px; 10 border: 2px solid red; 11 background: #000; 12 margin:20px auto; 13 cursor: pointer; 14 position: relative; 15 left: 0; 16 top: 0; 17 overflow: hidden; 18 } 19 .fire{ 20 width: 10px; 21 height:10px; 22 position: absolute; 23 bottom: 0; 24 } 25 .small-fire{ 26 width: 10px; 27 height:10px; 28 position: absolute; 29 border-radius: 50%; 30 } 31 </style> 32 </head> 33 <body> 34 <div id="container"></div> 35 </body> 36 <script src="move.js" type="text/javascript" charset="utf-8"></script> 37 <script type="text/javascript"> 38 // OOA 39 // 1.选中元素,点击事件,记录鼠标位置 40 // 2.创建主体烟花 41 // 3.初始化主体烟花 42 // 4.主体烟花运动 43 // OOD 44 // 选中元素,点击事件,记录鼠标位置 45 var ocont = document.getElementById("container"); 46 ocont.onclick = function(){ 47 //记录鼠标位置 48 new Fire(); 49 } 50 51 function Fire(){ 52 // 创建主体烟花 53 this.init() 54 } 55 56 Fire.prototype.init = function(){ 57 // 初始化主体烟花 58 this.move(); 59 } 60 Fire.prototype.move = function(){ 61 // 主体烟花运动 62 } 63 64 // OOP 65 window.onload = function(){ 66 var ocont = document.getElementById("container"); 67 ocont.onclick = function(eve){ 68 //记录鼠标位置 69 var e = eve || window.event; 70 var target = { 71 left:e.offsetX, 72 top:e.offsetY 73 } 74 new Fire(target,this); 75 } 76 } 77 78 function Fire(target,parent){ 79 // 创建主体烟花 80 this.parent = parent; 81 this.target = target; 82 this.ele = document.createElement("div"); 83 this.init(); 84 } 85 86 Fire.prototype.randomColor = function(){ 87 var r = Math.round(Math.random()*255).toString(16); 88 var g = Math.round(Math.random()*255).toString(16); 89 var b = Math.round(Math.random()*255).toString(16); 90 return "#"+this.zero(r)+this.zero(g)+this.zero(b); 91 } 92 Fire.prototype.zero = function(n){ 93 if(n<10 || n.length == 1){ 94 return "0" + n; 95 }else{ 96 return n; 97 } 98 } 99 Fire.prototype.init = function(){ 100 // 初始化主体烟花 101 this.ele.className = "fire"; 102 this.ele.style.background = this.randomColor(); 103 this.ele.style.left = this.target.left + "px"; 104 this.parent.appendChild(this.ele); 105 this.move(); 106 } 107 108 Fire.prototype.move = function(){ 109 // 主体烟花运动 110 move(this.ele,this.target,function(){ 111 this.ele.remove(), 112 this.smallFire() 113 }.bind(this)); 114 } 115 116 // 1.主体烟花消失后显示小烟花 117 // 2.将小烟花的初始位置放在鼠标单击的位置(主体烟花消失的位置) 118 // 3.让小烟花在画布中运动到随机位置 119 // 3.1 做圆周运动 120 Fire.prototype.smallFire = function(){ 121 var random = Math.round(Math.random()*10+10); 122 for(var i=0;i<random;i++){ 123 let div = document.createElement("div"); 124 div.className = "small-fire"; 125 div.style.background = this.randomColor(); 126 div.id = i; 127 div.style.left = this.target.left + "px"; 128 div.style.top = this.target.top + "px"; 129 this.parent.appendChild(div); 130 var target = { 131 left:Math.round(Math.random()*900), 132 top:Math.round(Math.random()*500) 133 } 134 move(div,target,function(){ 135 div.remove(); 136 }); 137 } 138 } 139 Fire.prototype.smallFire = function(){ 140 var r = Math.round(Math.random()*100+100); 141 for(var i=0;i<12;i++){ 142 let div = document.createElement("div"); 143 div.className = "small-fire"; 144 div.style.background = this.randomColor(); 145 div.id = i; 146 div.style.left = this.target.left + "px"; 147 div.style.top = this.target.top + "px"; 148 this.parent.appendChild(div); 149 var target = { 150 left:Math.round(Math.sin(Math.PI/180*30*i)*r) + this.target.left, 151 top:Math.round(Math.cos(Math.PI/180*30*i)*r) + this.target.top 152 } 153 move(div,target,function(){ 154 div.remove(); 155 }); 156 } 157 } 158 </script> 159 </html>
辅助调用代码：move（） 烟花的上升 绽放
1 function move(ele,json,callback){ 2 clearInterval(ele.t); 3 ele.t = setInterval(() => { 4 var onoff = true; 5 for(var i in json){ 6 var iNow = parseInt(getStyle(ele,i)); 7 var speed = (json[i] - iNow)/6; 8 speed = speed<0 ? Math.floor(speed) : Math.ceil(speed); 9 if(iNow != json[i]){ 10 onoff = false; 11 } 12 ele.style[i] = iNow + speed + "px"; 13 } 14 if(onoff){ 15 clearInterval(ele.t); 16 callback && callback(); 17 } 18 }, 30); 19 } 20 function getStyle(ele,attr){ 21 if(ele.currentStyle){ 22 return ele.currentStyle[attr]; 23 }else{ 24 return getComputedStyle(ele,false)[attr]; 25 } 26 }