js面向对象之烟花效果

灰太狼 2023-07-25 11:26 15阅读 0赞

**效果图如下:**  
![在这里插入图片描述][20200414205015580.gif]  
**html代码如下**

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> * { margin: 0; padding: 0; } #bg { width: 800px; height: 400px; position: relative; background: black; margin: 100px; /* 溢出隐藏是防止小烟花扩散出去 */ overflow: hidden; } /*大烟花样式 */ .bigFire { width: 10px; height: 10px; position: absolute; } /* 小烟花样式 */ .smallFire { width: 5px; height: 5px; position: absolute; } </style>
    </head>
    
    <body>
        <div id="bg"></div>
    
        <script src="./烟花.js"></script>
        <script> let oDiv = document.querySelector("#bg"); const fire = new Fire(oDiv); fire.init(); </script>
    </body>
    
    </html>

**js代码如下:**

class Fire { 
    
        constructor(ele) { 
    
            this.ele = ele;
    
        }
    
        // 初始化函数
        init() { 
    
            // 点击事件生成烟花函数
            this.getEvent();
    
        }
    
        // 点击事件生成烟花函数
        getEvent() { 
    
            // 点击事件
            this.ele.addEventListener('click', (e) => { 
    
                // 得到点击的位置坐标
                let x = e.offsetX;
    
                let y = e.offsetY;
    
                if (x < 0) { 
    
                    x = 0;
    
                }
    
                if (y < 0) { 
    
                    y = 0;
    
                }
    
                if (x > this.ele.clientWidth) { 
    
                    x = this.ele.clientWidth;
    
                }
    
                if (y > this.ele.clientHeight) { 
    
                    y = this.ele.clientHeight;
    
                }
    
                // 生成两个大烟花，形成视觉移动的结果
                let fire1 = document.createElement('p');
    
                let fire2 = document.createElement('p');
    
                // 设置烟花样式
                fire1.className = 'bigFire';
    
                fire2.className = 'bigFire';
    
                fire1.style.left = x + 'px';
    
                fire1.style.top = y + 'px';
    
                fire2.style.left = x + 'px';
    
                fire2.style.bottom = 0 + 'px';
    
                let color = this.setColor();
    
                fire1.style.backgroundColor = color;
    
                fire2.style.backgroundColor = color;
    			
    			// 阻止冒泡，防止点击重复父级受影响生成烟花
                fire1.addEventListener('click' , (e)=>{ 
                    e.stopPropagation();
                })
         
                fire2.addEventListener('click' , (e)=>{ 
                    e.stopPropagation();
                })
    
                // 加入到标签里
                this.ele.appendChild(fire1);
    
                this.ele.appendChild(fire2);
    
                // 大烟花运动
                this.move(fire2, {  top: y }, () => { 
    
                    // 可以这样隐藏
                    // fire1.style.display = "none";
    
                    // fire2.style.display = "none";
    
                    // 也可以删除标签节点
                    this.ele.removeChild(fire1);
    
                    this.ele.removeChild(fire2);
    
                    // 规定下生成小烟花数量范围,此处为20-50个
                    let num = parseInt((Math.random() * 31) + 20);
    
                    // 循环生成小烟花标签
                    for (let i = 0; i < num; i++) { 
    
                        let smallFire = document.createElement('p');
    
                        // 小烟花添加样式
                        smallFire.className = "smallFire";
    
                        smallFire.style.backgroundColor = this.setColor();
    
                        smallFire.style.left = `${ x}px`;
    
                        smallFire.style.top = `${ y}px`;
    
                        this.ele.appendChild(smallFire);
    
                        // 随机移动位置
                        let randomX = parseInt(Math.random() * ((x + 150) + 1 - (x - 150)) + (x - 150));
    
                        let randomY = parseInt(Math.random() * ((y + 150) + 1 - (y - 150)) + (y - 150));
    
                        // 将这个随机位置,定义为小烟花的运动终止目标位置
                        this.move(smallFire, {  left: randomX, top: randomY }, () => { 
    
                            setTimeout(() => { 
    
                                // 运动到指定位置,等待时间,清除小烟花
                                this.ele.removeChild(smallFire);
    
                            }, 100);
    
                        });
                    }
                });
    
            });
    
        }
    
        // 随机颜色
        setColor() { 
    
            let r = parseInt(Math.random() * 256);
            let g = parseInt(Math.random() * 256);
            let b = parseInt(Math.random() * 256);
    
            return `rgb(${ r},${ g},${ b})`;
        }
    
        // 移动函数
        move(elem, obj, callBack) { 
    
            let time = { };
    
            for (let type in obj) { 
    
                let oldVal = 0;
    
                // 透明度扩大一百倍比较，输入时也是扩大后的值
                if (type === "opacity") { 
    
                    oldVal = parseFloat(window.getComputedStyle(elem)[type]) * 100;
                }
                else { 
    
                    oldVal = parseInt(window.getComputedStyle(elem)[type]);
    
                }
    
                time[type] = setInterval(() => { 
    
                    let val = (obj[type] - oldVal) / 5;
    
                    val = val > 0 ? Math.ceil(val) : Math.floor(val);
    
                    oldVal += val;
    
                    if (type === "opacity") { 
    
                        elem.style[type] = oldVal / 100;
    
                    }
    
                    else { 
    
                        elem.style[type] = oldVal + 'px';
    
                    }
    
                    if (obj[type] == oldVal) { 
    
                        clearInterval(time[type]);
    
                        delete (time[type]);
    
                    }
    
                    if (Object.keys(time) == 0) { 
    
                        callBack();
    
                    }
    
                }, 20);
    
            }
    
        }
    }

移动函数详解参考[多功能轮播图][Link 1]

[20200414205015580.gif]: /images/20230528/5a229cad8d6c4fd7bc1932a9711a3b46.png
[Link 1]: https://blog.csdn.net/weixin_45000814/article/details/105308525