学习笔记2

#学习记录：简单的烟花效果

记录一个简单的烟花效果，用js的初步知识以及面向对象的思想就可以轻松完成

HTML结构部分

<div id="tips">
 <a id="auto" href="javascript:;" class="">自动放烟花</a>
</div>

样式部分

body {
    background: #000;
    font: 12px/1.5 arial;
    color: #7a7a7a;
  }

  a {
    text-decoration: none;
    outline: none;
  }

  #tips,
  #copyright {
    position: absolute;
    width: 100%;
    height: 50px;
    text-align: center;
    background: #171717;
    border: 2px solid #484848;
  }

  #tips {
    top: 0;
    border-width: 0 0 2px;
  }

  #tips a {
    font: 14px/30px arial;
    color: #fff;
    background: #f06;
    display: inline-block;
    margin: 10px 5px 0;
    padding: 0 15px;
    border-radius: 15px;
  }

  #tips a.active {
    background: #fe0000;
  }

  .fire {
    width: 3px;
    height: 30px;
    background: white;
    position: absolute;
    top: 100%;
  }

  .spark {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    left: 0;
    top: 0;
  }

java scripet部分

 //创建烟花对象(使用构造函数)
   function Fire(left, top) {
     this.left = left || random(20, window.innerWidth - 20);
     this.top = top || random(20, window.innerHeight - 20);
     this.speed = random(5, 20);
     this.height = random(3, 5);
     //spark的属性
     this.num = random(20, 30);
     this.r = random(100, 180);
     //调用初始化函数和动画函数
     this.init().animation();
   }
   //烟花对象的方法
   Fire.prototype = {
     constructor: Fire,
     //初始化（实例化对象）
     //创建结点，给结点添加样式
     init: function () {
       //创建结点
       this.div = document.createElement("div");
       this.div.classList.add("fire");
       //只给left属性，不给top，top是动画变化的值
       this.div.style.left = this.left + "px";
       //将创建好的烟花对象给body
       //body获取方法：document.body
       document.body.appendChild(this.div);
       //将初始化的对象返回
       return this;
     },
     //烟花的动画
     //在烟花动画完成之后执行烟火的动画
     animation: function () {
       move(
         this.div, {
           top: this.top,
           height: this.height
         },
         () => {
           this.boom();
         }
       );
     },
     boom: function () {
       this.div.style.background = "rgba(0,0,0,0)";
       //循环生成烟火对象
       let deg = 360 / this.num;
       for (let i = 0; i < this.num; i++) {
         new Spark(i * deg, this.r, this.div);
       }
     }
   };
   Object.defineProperty(Fire.prototype, "constructor", {
     enumerable: false,
     writable: false
   });
   //创建spark对象，角度、半分散圆的半径、烟花对象作为参数传入
   function Spark(deg, r, ele) {
     this.left = parseInt(r * Math.sin((deg * Math.PI) / 180));
     this.top = parseInt(r * Math.cos((deg * Math.PI) / 180));
     this.bgcolor = color();
     this.speed = random(10, 30);
     this.deg = deg;
     this.ele = ele;

     //调用初始化函数
     this.init().animation();
   }
   //烟火对象的方法
   Spark.prototype = {
     init: function () {
       this.span = document.createElement("span");
       this.span.classList.add("spark");
       //将Spark的bgcolor给到实例化的对象的背景色属性
       this.span.style.background = this.bgcolor;
       //将span元素添加到Fire中的div中作为子元素
       this.ele.appendChild(this.span);
       //返回初始化好的对象
       return this;
     },
     //动画函数
     animation: function () {
       move(
         this.span, {
           left: this.left,
           top: this.top,
           opacity: 10
         },
         () => {
           // 移出烟花
           this.remove();
         }
       );
     },
     remove: function () {
       document.body.removeChild(this.ele);
     }
   };
   Object.defineProperty(Spark.prototype, "constructor", {
     enumerable: false,
     writable: false
   });
   //窗口内的点击事件
   document.onclick = function (e) {
     new Fire(e.clientX, e.clientY);
   };
   // 按钮点击自动播放
   //获取 元素
   let auto = getEle("#auto");
   //绑定点击事件
   //使用标志值来判断播放状态
   let flag = true;
   let time; //这两个变量的定义必须在点击函数外面，
   //如果在里面定义，就是说每次点击都重新生成一个flag和time，就无法修改他们的值
   auto.onclick = function (e) {

     if (flag) {
       time = setInterval(function () {
         new Fire();
       }, 1000);
       flag = false;
     } else {
       clearInterval(time);
       flag = true;
     }
     //组织冒泡
     e.cancelBubble = true;
   };