過年了，xdm快來跟我學習做煙花，包教包會（html+css+js）

語言: CN / TW / HK
時間 2022-12-27 04:15:06

theme: cyanosis

  • PK創意鬧新春，我正在參加「春節創意投稿大賽」，詳情請看：春節創意投稿大賽 雷迪森安的鄉親們，歡迎來到老實人的前端課堂，上次寫了一個新春小盲盒，這大過年的，我把煙花都給你們準備好了，今天我們來寫個小煙花吧。

image.png

正片

注意看有兩種模式哦，可以自由切換，鼠標點哪里哪里有煙花，還可以自動放煙花

desktop-2022-01-18-11-21-32.gif

結構就兩行

```html

```

樣式

以下樣式大部分是js代碼渲染上dom後表現出來的 ```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;
}

```

表現

關鍵代碼，滿滿註釋哦，這我可夠意思了哈，不懂的話再私下問我吧。 ```js 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) { //產生範圍在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) {
  //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);
  //window.setInterval方法 該方法使得一個函數每隔固定時間被調用一次
  //                console.log(param.y);
  oEntity.timer = setInterval(function () {
    //                    console.log(oEntity.offsetTop);
    //                    console.log(oEntity.style.top);
    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++;
            //判斷煙花爆炸顆粒是否掉落至窗體之外，為真則remove
            //splice() 方法可刪除從 index 處開始的零個或多個元素
            (obj.offsetTop < 0 || obj.offsetLeft < 0 || obj.offsetTop > document.documentElement.clientHeight || obj.offsetLeft > document.documentElement.clientWidth) && (document.body.removeChild(obj), aChip.splice(i, 1))
          };
          //判斷煙花爆炸顆粒是否全部remove，為真則clearInterval(timer);
          !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 }); ``` 不學沒思路，看完是不是感覺也不難啊？你做出來了嗎？

最後

博主為人老實，無償解答問題，也會錄製一些學習視頻教同學們知識❤

如果對您有幫助，希望能給個👍/評論/收藏

您的三連~是對我創作最大的動力支持

「」
「」