简单js点击实现爱心烟花效果

作为一个前端的小白，在疫情期间无事可做，只好学习一些感兴趣的东西，很多人都说我们程序员不懂情调，于是我就写了这篇博客，用意在于我们程序员也是有情调的：
<!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>
        * {
            padding: 0;
            margin: 0;
        }
        body {
            width: 100%;
            height: 100%;
            background-color: black;
            overflow: hidden;
        }
    </style>
    //上面是简单的一些页面样式
</head>

<body>

</body>
<script>
    function getStyle(obj, attr) {//obj:元素对象，attr:css属性名
    if (window.getComputedStyle) {//条件用属性做，不存在就是undefined
        return window.getComputedStyle(obj)[attr];
    } else {
        return obj.currentStyle[attr];
    }
}
function bufferMove(obj, json, fn) {//obj:元素对象   json对象:多个属性和目标值   fn:回调函数 
    let speed = 0;
    clearInterval(obj.timer);//将定时器的返回值给obj元素的属性
    obj.timer = setInterval(function () {
        var flag = true;//假设标记，代表运动结束
        for (var attr in json) {
        //1.获取当前的属性值
        //判断attr===opacity,换一种当前值的取法
            var currentValue = null;
            if (attr === 'opacity') {
                currentValue = Math.round(getStyle(obj, attr) * 100);//将值扩大100倍
            } else {
                currentValue = parseInt(getStyle(obj, attr));
            }
            
            //2.求速度
            speed = (json[attr] - currentValue) / 10;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 
  			//3.判断停止
            if (currentValue !== json[attr]) {//没到目标点就继续
                if (attr === 'opacity') {
                    obj.style.opacity = (currentValue + speed) / 100;//缩小100倍
                    obj.style.filter = 'alpha(opacity=' + (currentValue + speed) + ')';
                } else {
                    obj.style[attr] = currentValue + speed + 'px';
                }
                flag = false;
            }
        }
        if (flag) {
            clearInterval(obj.timer);
            fn && typeof fn === 'function' && fn();//执行回调函数,如果fn存在，执行fn
        }
    }, 10);
}
//以上便是缓冲运动的封装



    class Firework {
        constructor(x, y) {//x,y鼠标的位置
            this.x = x;//将水平位置赋值给this.x属性。
            this.y = y;
            this.ch = document.documentElement.clientHeight;//可视区的高度
            this.xin = 0;
        }
        init() {
            //创建节点
            this.firebox = document.createElement('div');
            this.firebox.style.cssText = `width:5px;height:5px;background:fff;
            position:absolute;left:${this.x}px;top:${this.ch}px`;//创建的节点样式
            document.body.appendChild(this.firebox);
            this.firemove();//创建完成后，直接运动
        }
//2.节点运动
        firemove() {
            bufferMove(this.firebox, { top: this.y }, () => {
                document.body.removeChild(this.firebox);
                //当节点消失的时候，创建心形碎片
                this.createfires()
            });
        }
        
 //3.当前鼠标点击的位置(随机颜色)
        createfires() {
            let num = 75;/心形碎片的个数；可根据自己喜好改动
            this.xin = 2 * Math.PI / num;//每个弧长
            for (let i = 1; i <= num; i++) {//循环
                this.fires = document.createElement('div');
                this.fires.style.cssText = `width:5px;height:5px;background:rgb(${this.
                    rannum(0, 255)},${this.rannum(0, 255)},${this.rannum(0, 255)});//随机颜色及碎片样式
                position:absolute;left:${this.x}px;top:${this.y}px;`;//控制碎片的位置
                document.body.appendChild(this.fires);
                this.fireboom(this.fires, i);//设计成一个一个运动，等到循环结束，出现整体结果
            }
        }

            //4.心形碎片运动。
        fireboom(obj, i) {
            let r = 0;//心形初始的大小
            //渐渐变大
            obj.timer = setInterval(() => {
                r += 1;
                if (r >= 100) {
                    document.body.removeChild(obj);
                //    超出可视区删除
                    clearInterval(obj.timer);
                }
                obj.style.left =this.x + (16 * (Math.pow(Math.sin(this.xin * i), 3))) * r + 'px';//心形X轴的位置公式
                obj.style.top =this.y +( 13 * Math.cos(this.xin * i) - 
                5 * Math.cos(2 * this.xin * i) - 2 * Math.cos(3 * this.xin * i)  - 
                Math.cos(4 * this.xin * i)) * r + 'px';//心形Y轴的位置公式
//想要其他图案可自行找公式套入即可
            }, 2000 / 60)//速度可根据喜好调节
        }

        rannum(min, max) {
            return Math.round(Math.random() * (max - min) + min);
        }
    }
    document.onclick = function (ev) {
        var ev = ev || window.event;
        new Firework(ev.clientX, ev.clientY).init();
    }
</script>

</html>
以上便是心形的全部代码了。其实代码也是挺有趣的，疫情期间如果无聊就一起来学习吧！
来源：CSDN
作者：wy19981005
链接：https://blog.csdn.net/wy19981005/article/details/104594137
标签
speed