面向对象写出随机烟花效果

封装运动函数，来实现烟花的向上移动

注意：

首先在运动函数中：

1、在每一次执行新的函数时，一定要清除上一次的定时器，否则会造成定时器的累加

2、注意浏览器的兼容问题

3、要判断步进值的正负

 1 var timer = null;//定时器
 2 function startMove(obj, objArr, callback) {
 3     clearInterval(obj.timer);//清除上一次的定时器
 4     var onOff = false;//定义开关，初始值为false
 5     obj.timer = setInterval(function () {
 6         // console.log(attr);//属性
 7         // console.log(objArr[attr]);//属性值
 8         //遍历对象
 9         for (var attr in objArr) {
10             //获取实时位置
11             var tmpPos = parseInt(getPos(obj, attr));
12             //定义步长值
13             var speed = (objArr[attr] - tmpPos) / 10;
14             //判断步长值
15             speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
16            
17             //赋值给对象
18             obj.style[attr] = tmpPos + speed + 'px';
19 
20         }
21          //判断元素运动的临界值
22          if((tmpPos + speed)==objArr[attr]) onOff = true;
23         if(onOff){
24             clearInterval(obj.timer);
25             if(callback){
26                 callback();
27             }
28         }
29     }, 30)
30 
31 }
32 //封装函数获取实时位置
33 function getPos(obj, attr) {
34     if (obj.currentStyle) {
35         return currentStyle[attr];//IE
36     } else {
37         return getComputedStyle(obj)[attr];//非IE
38     }
39 }

面向对象

其次：

在面向对象中

1、在绑定事件中，切记实例化对象

2、在调用运动函数时，记得参数以一一对应，并且在实现之后清除自身

3、在小烟花中，在后面调用运动函数时，要使用块级作用域，将sFire保存起来

一次执行完毕，执行下一次

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style>
  9     * {
 10         margin: 0;
 11         padding: 0;
 12     }
 13 
 14     #cont {
 15         width: 1200px;
 16         height: 600px;
 17         background: black;
 18         margin: 50px auto;
 19         position: relative;
 20         cursor:pointer;
 21         background:black;
 22         /* 要设置相对定位，否则大烟花无法与鼠标位置相对应 */
 23     }
 24 
 25     .big-fire {
 26         background: red;
 27         position: absolute;
 28         /* 设置bottom时,top获取为最大值,减去鼠标点击位置 */
 29         bottom: 0px;
 30         width: 6px;
 31         height: 6px;
 32     }
 33 
 34     .small-fire {
 35         width: 10px;
 36         height: 10px;
 37         position: absolute;
 38         border-radius: 50%;
 39     }
 40 </style>
 41 </head>
 42 <body>
 43     <div id="cont"></div>
 44     <script src="./move.js"></script>
 45     <script>
 46         //1 获取节点
 47         var contObj = document.getElementById('cont');
 48         //2 绑定事件获取鼠标实时位置
 49         contObj.onclick = function(eve){
 50             var e = eve || window.event;
 51             var mousePos={
 52                 x:e.offsetX,
 53                 y:e.offsetY
 54             }
 55             // console.log(e.offsetX);
 56             // console.log(e.offsetY);
 57             new Fire(contObj,mousePos);
 58         }
 59 
 60         //3 封装烟花构造函数
 61         function Fire(contObj,mousePos){
 62             //!!!
 63             this.contObj = contObj;
 64             this.mousePos = mousePos;
 65             //创建大烟花，设置class，left，bg
 66             var bigFire = document.createElement('div');
 67             bigFire.className = 'big-fire';
 68             bigFire.style.left = mousePos.x + 'px';
 69             bigFire.style.backgroundColor = this.ranColor();
 70             contObj.appendChild(bigFire);
 71             var that = this;
 72             startMove(bigFire,{top:mousePos.y},function(){
 73                 bigFire.remove();
 74                 that.smallFire();
 75             })
 76         }
 77         /*封装小烟花*/
 78         Fire.prototype.smallFire = function(){
 79             var fireNum = 20;
 80             for(var i = 0;i<fireNum;i++){
 81                 var sFire = document.createElement('div');
 82                 sFire.className = 'small-fire';
 83                 contObj.appendChild(sFire);
 84                 sFire.style.backgroundColor = this.ranColor();
 85                 //小烟花初始位置
 86                 sFire.style.left = this.mousePos.x + 'px';
 87                 sFire.style.top = this.mousePos.y + 'px';
 88                 //小烟花终点位置
 89                 var sLeft =this.ranNum(0,contObj.offsetWidth - sFire.offsetWidth);
 90                 var sTop =this.ranNum(0,contObj.offsetHeight - sFire.offsetHeight);
 91                 //6 调用运动函数
 92                 //因为for的循环速度,比烟花运动到终点的速度快
 93                 // 调用使用运动函数是的sFire,在烟花到了终点位置时,已经被其他新的烟花给覆盖了
 94                 // 使用块级作用域,将sFire保存起来,一次执行完毕,执行下一次
 95                 (function(sFire){
 96                     startMove(sFire,{left:sLeft,top:sTop},function(){
 97                         sFire.remove();
 98                     });
 99                 })(sFire)//！！！注意调用小烟花
100             }
101         }
102         //随机颜色
103         Fire.prototype.ranColor=function(){
104             var r = this.ranNum(0,255);
105             var g = this.ranNum(0,255);
106             var b = this.ranNum(0,255);
107             return `rgb(${r},${g},${b})`;
108         }
109         //封装随机数
110         Fire.prototype.ranNum=function(min,max){
111             return Math.round(Math.random()*(max-min)+min);
112         }
113     </script>
114 </body>
115 </html>

原文地址：https://www.cnblogs.com/zoutuan/p/11587947.html