烟花爆炸

最新推荐文章于 2023-01-06 15:04:28 发布

a_li_li

最新推荐文章于 2023-01-06 15:04:28 发布

阅读量400

点赞数

本文链接：https://blog.csdn.net/a_li_li/article/details/70238840

版权

<!DOCTYPE html>

<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           body {
               width: 100%;
               height: 100%;
               background: black;
               overflow: hidden;
           }
           .fire {
               width: 3px;
               height: 30px;
               background: white;
               position: absolute;
           }
           .spark {
               width: 3px;
               height: 3px;
               position: absolute;
           }


       </style>

       <script src="move.js"></script>
       <script>
           onload = function(){

               //页面上任意位置点击
               document.onclick = function(e){
                   var evt = e || event;
                   var x = evt.pageX;
                   var y = evt.pageY;

                   fire(x, y);
               }

               //发射烟花
               function fire(x, y){

                   //创建烟花div
                   var fireNode = document.createElement("div");
                   fireNode.className = "fire";
                   fireNode.style.left = x + "px"; //位置
                   fireNode.style.top = document.documentElement.clientHeight - 30 + "px";
                   document.body.appendChild(fireNode);

                   //发射
                   animate(fireNode, {top:y, height:3}, function(){
                       document.body.removeChild(fireNode); //移除节点

                       //爆炸(创建多个小div节点)
                       var count = parseInt(Math.random()*30) + 30; //30~59
                       for (var i=0; i<count; i++){
                           fireBoom(x, y);
                       }

                   });
               }

               //爆炸,创建一个小div节点
               function fireBoom(x, y){

                   //创建小div节点
                   var sparkNode = document.createElement("div");
                   sparkNode.className = "spark";
                   sparkNode.style.left = x + "px"; //位置
                   sparkNode.style.top = y + "px";
                   sparkNode.style.backgroundColor = randomColor(); //随机颜色
                   document.body.appendChild(sparkNode);

                   //爆炸,抛物线运动
                   var xSpeed = parseInt(Math.random()*20) * (Math.random()>0.5 ? 1 : -1);
                   var ySpeed = parseInt(Math.random()*20) * (Math.random()>0.6 ? 1 : -1);
                   //console.log(xSpeed + "," + ySpeed);

                   //定时器
                   var timer = setInterval(function(){
                       ySpeed++;
                       sparkNode.style.left = sparkNode.offsetLeft + xSpeed + "px";
                       sparkNode.style.top = sparkNode.offsetTop + ySpeed + "px";

                       //当超出页面，让节点消失
                       if (sparkNode.offsetLeft < 0
                           || sparkNode.offsetLeft > document.documentElement.clientWidth
                           || sparkNode.offsetTop > document.documentElement.clientHeight) {

                               document.body.removeChild(sparkNode); //清除节点
                               clearInterval(timer); //清除定时器
                           }

                   }, 30);


               }


               //随机颜色
               function randomColor(){
                   //"#FFFFFF"
                   var arr = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F'];
                   var str = "#";
                   for (var i=0; i<6; i++){
                       str += arr[ parseInt(Math.random()*16) ];
                   }
                   return str;
               }



           }
       </script>
   </head>
   <body>
   </body>

</html>

move.js:

//获取对应元素的样式属性值
function getStyleAttr(obj, attr){
   if (window.getComputedStyle){
       return getComputedStyle(obj, null)[attr];
   }
   else {
       return obj.currentStyle[attr];
   }
}

//运动函数
//let,top,width,height,opactiy, paddingLeft...

//animate(obj, {left:300, top:300, width:300}, fn)

function animate(obj, json, fn){

   clearInterval(obj.timer); //清除旧定时器

   //开启新定时器
   obj.timer = setInterval(function(){

       var bStop = true; //是否可以停止定时器

       for (var attr in json){
           var iTarget = json[attr];
           //iTarget: 目标值
           //attr：属性名称

           //1, current
           var current;
           if (attr == "opacity"){ //透明度
               current = parseFloat(getStyleAttr(obj, attr))*100;
               current = Math.round(current);
           }
           else { //left,top,width,height
               current = parseFloat(getStyleAttr(obj, attr));
               current = Math.round(current);
           }

           //2, speed
           var speed = (iTarget-current)/8;    (400-393)/8
           speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

           //3, 临界值
           if (current != iTarget){
               bStop = false; //当有一个属性的值未到达目标值，则不能停止定时器
           }

           //4, 运动
           if (attr == "opacity"){ //透明度
               obj.style[attr] = (current+speed)/100;
               obj.style.filter = "alpha(opacity=" + (current+speed) + ")";
           }
           else { //left,top,width,height..
               obj.style[attr] = current+speed + "px";
           }
       }

       //如果bStop为true
       if (bStop){
           console.log("停止运动");
           clearInterval(obj.timer); //停止运动，清除定时器

           if (fn) {
               fn(); //在运动结束后，回调
           }
       }

   }, 30);

}

//animate(oBox, "left", 100, function(){} );
/*
function animate(obj, attr, iTarget, fn){

   clearInterval(obj.timer); //清除旧定时器

   //开启新定时器
   obj.timer = setInterval(function(){

       //1, current
       var current;
       if (attr == "opacity"){ //透明度
           current = parseFloat(getStyleAttr(obj, attr))*100;
           current = Math.round(current);
       }
       else { //left,top,width,height
           current = parseFloat(getStyleAttr(obj, attr));
           current = Math.round(current);
       }

       //2, speed
       var speed = (iTarget-current)/8;    (400-393)/8
       speed = speed>0 ? Math.ceil(speed) : Math.floor(speed);

       //3, 临界值
       if (current == iTarget){
           console.log("停止运动");
           clearInterval(obj.timer); //停止运动，清除定时器

           if (fn) {
               fn(); //在运动结束后，回调
           }

           return;
       }

       //4, 运动
       if (attr == "opacity"){ //透明度
           obj.style[attr] = (current+speed)/100;
           obj.style.filter = "alpha(opacity=" + (current+speed) + ")";
       }
       else { //left,top,width,height..
           obj.style[attr] = current+speed + "px";
       }


   }, 30);

}

*/