javascript實現的燃放煙火效果程式碼例項

antzone發表於2017-04-07
JavaScript

本章節分享一段程式碼例項，它實現了燃放煙火的效果。

效果還算是挺美觀的，感興趣的朋友可以進行分析。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="author" content="http://www.softwhy.com/" />
  <title>螞蟻部落</title>
  <style type="text/css">
    html, body {
      overflow: hidden;
    }

    body, div, p {
      margin: 0;
      padding: 0;
    }

    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;
        }

    #copyright {
      bottom: 0;
      line-height: 50px;
      border-width: 2px 0 0;
    }

      #copyright a {
        color: #FFF;
        background: #7A7A7A;
        padding: 2px 5px;
        border-radius: 10px;
      }

        #copyright a:hover {
          background: #F90;
        }

    p {
      position: absolute;
      top: 55px;
      width: 100%;
      text-align: center;
}
</style>
<script type="text/javascript">
var fgm = {
  on: function(element, type, handler) {
    return element.addEventListener ? element.addEventListener(type, handler, false) : element.attachEvent("on" + type, handler)
  },
  un: function(element, type, handler) {
    return element.removeEventListener ? element.removeEventListener(type, handler, false) : element.detachEvent("on" + type, handler)
  },
  bind: function(object, handler) {
    return function() {
      return handler.apply(object, arguments)
    }
  },
  randomRange: function(lower, upper) {
    return Math.floor(Math.random() * (upper - lower + 1) + lower)
  },
  getRanColor: function() {
    var str = this.randomRange(0, 0xFFFFFF).toString(16);
    while (str.length < 6) str = "0" + str;
    return "#" + str
  }
};
//初始化物件
function FireWorks() {
  this.type = 0;
  this.timer = null;
  this.fnManual = fgm.bind(this, this.manual)
}
FireWorks.prototype = {
  initialize: function() {
    clearTimeout(this.timer);
    fgm.un(document, "click", this.fnManual);
    switch (this.type) {
      case 1:
        fgm.on(document, "click", this.fnManual);
        break;
      case 2:
        this.auto();
        break;
    };
  },
  manual: function(event) {
    event = event || window.event;
    this.__create__({
      x: event.clientX,
      y: event.clientY
    });
  },
  auto: function() {
    var that = this;
    that.timer = setTimeout(function() {
      that.__create__({
        x: fgm.randomRange(50, document.documentElement.clientWidth - 50),
        y: fgm.randomRange(50, document.documentElement.clientHeight - 150)
      })
      that.auto();
    }, fgm.randomRange(900, 1100))
  },
  __create__: function(param) {
    var that = this;
    var oEntity = null;
    var oChip = null;
    var aChip = [];
    var timer = null;
    var oFrag = document.createDocumentFragment();
    oEntity = document.createElement("div");
    with(oEntity.style) {
      position = "absolute";
      top = document.documentElement.clientHeight + "px";
      left = param.x + "px";
      width = "4px";
      height = "30px";
      borderRadius = "4px";
      background = fgm.getRanColor();
    };
    document.body.appendChild(oEntity);
    oEntity.timer = setInterval(function() {
      oEntity.style.top = oEntity.offsetTop - 20 + "px";
      if (oEntity.offsetTop <= param.y) {
        clearInterval(oEntity.timer);
        document.body.removeChild(oEntity);
        (function() {
          //在50-100之間隨機生成碎片
          //由於IE瀏覽器處理效率低, 隨機範圍縮小至20-30
          //自動放煙花時, 隨機範圍縮小至20-30
          var len = (/msie/i.test(navigator.userAgent) || that.type == 2) ? fgm.randomRange(20, 30) : fgm.randomRange(50, 100)
          for (i = 0; i < len; i++) {
            oChip = document.createElement("div");
            with(oChip.style) {
              position = "absolute";
              top = param.y + "px";
              left = param.x + "px";
              width = "4px";
              height = "4px";
              overflow = "hidden";
              borderRadius = "4px";
              background = fgm.getRanColor();
            };
            oChip.speedX = fgm.randomRange(-20, 20);
            oChip.speedY = fgm.randomRange(-20, 20);
            oFrag.appendChild(oChip);
            aChip[i] = oChip
          };
          document.body.appendChild(oFrag);
          timer = setInterval(function() {
            for (i = 0; i < aChip.length; i++) {
              var obj = aChip[i];
              with(obj.style) {
                top = obj.offsetTop + obj.speedY + "px";
                left = obj.offsetLeft + obj.speedX + "px";
              };
              obj.speedY++;
              (obj.offsetTop < 0 || obj.offsetLeft < 0 ||
                obj.offsetTop > document.documentElement.clientHeight ||
                obj.offsetLeft > document.documentElement.clientWidth) &&
              (document.body.removeChild(obj), aChip.splice(i, 1))
            };
            !aChip[0] && clearInterval(timer);
          }, 30)
        })()
      }
    }, 30)
  }
};
fgm.on(window, "load", function() {
  var oTips = document.getElementById("tips");
  var aBtn = oTips.getElementsByTagName("a");
  var oFireWorks = new FireWorks();
  fgm.on(oTips, "click", function(event) {
    var oEvent = event || window.event;
    var oTarget = oEvent.target || oEvent.srcElement;
    var i = 0;
    if (oTarget.tagName.toUpperCase() == "A") {
      for (i = 0; i < aBtn.length; i++) aBtn[i].className = "";
      switch (oTarget.id) {
        case "manual":
          oFireWorks.type = 1;
          break;
        case "auto":
          oFireWorks.type = 2;
          break;
        case "stop":
          oFireWorks.type = 0;
          break;
      }
      oFireWorks.initialize();
      oTarget.className = "active";
      oEvent.stopPropagation ? oEvent.stopPropagation() : oEvent.cancelBubble = true
    }
  });
});
fgm.on(document, "contextmenu", function(event) {
  var oEvent = event || window.event;
  oEvent.preventDefault ? oEvent.preventDefault() : oEvent.returnValue = false
});
</script>
</head>
<body>
  <div id="tips">
    <a id="manual" href="javascript:;">手動放煙花</a>
    <a id="auto" href="javascript:;">自動放煙花</a>
    <a id="stop" href="javascript:;">停止放煙花</a>
  </div>
</body>
</html>

相關文章