烟花爆炸

深藏阁楼爱情的钟 2022-06-17 06:24 286阅读 0赞

<!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);  
      
\}  
  
  
\*/