马上春节，快来跟我学习做烟花，包教包会（html+css+js）

雷迪森安的乡亲们，欢迎来到老实人的前端课堂，上次写了一个新春小盲盒，这大过年的，我把烟花都给你们准备好了，今天我们来写个小烟花吧。

正片

注意看有两种模式哦，可以自由切换，鼠标点哪里哪里有烟花，还可以自动放烟花
视频演示：html+css写一个烟花，源码请你直接拿走！

结构就两行

<divid="tips"><aid="manual"href="javascript:;">手动放烟花</a><aid="auto"href="javascript:;">自动放烟花</a></div>

样式

以下样式大部分是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;}

表现

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

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){returnfunction(){returnhandler.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
    }};//初始化对象functionFireWorks(){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){case1:
          fgm.on(document,"click",this.fnManual);break;case2: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-30var 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 =newFireWorks();

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

不学没思路，看完是不是感觉也不难啊？你做出来了吗？

做好的网页效果,如何通过发链接给别人看?

1.1解决部署上线~> 部署上线工具(永久免费使用)

1.不需要买服务器就能部署线上,全世界都能访问你的连接啦, 这里给大家推荐一个程序员必备神器~ 简单易懂, 简直神器 ~ 需要可在公z号获取

2.就是把你的代码效果做好了以后, 部署到线上, 把链接发给别人, 就可以让对方通过你的连接点击进去, 就能看到你的网页效果啦, 电脑端和手机端都可以噢! (不然别人看你的网页都要发文件过去,体验感不太好~)

最后

博主为人老实，无偿解答问题，也会录制一些学习视频教同学们知识❤

如果对您有帮助，希望能给个👍/评论/收藏

您的三连~是对我创作最大的动力支持

关注：前端老实人👇领取源码哦~