基于Html+CSS+JS怎样实现手动放烟花效果

基于html+CSS+js怎样实现手动放烟花效果，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

效果展示

注意看有两种模式哦，可以自由切换，鼠标点哪里哪里有烟花，还可以自动放烟花

视频演示：html+css写一个烟花，源码请你直接拿走！

实现代码

Html

  <div id="tips">    <a id="manual" href="javascript:;" rel="external nofollow"  rel="external nofollow" >手动放烟花</a>    <a id="auto" href="javascript:;" rel="external nofollow"  rel="external nofollow" >自动放烟花</a>  </div>

Css

以下样式大部分是js代码渲染上dom后表现出来的

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

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) { //产生范围在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  });

关键代码，满满注释哦，这我可够意思了哈，不懂的话再私下问我吧。

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

进行声明。3.外部样式，其中链接样式是使用频率最高，最实用的样式，只需要在之间加上

css的全称是什么

css的全称是Cascading Style Sheets（层叠样式表），它是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

看完上述内容是否对您有帮助呢？如果还想对相关知识有进一步的了解或阅读更多相关文章，请关注编程网精选频道，感谢您对编程网的支持。