烟花----事件对象event

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./utils.js"></script>
</head>

<body>
    <div id="tips"><a id="auto" href="javascript:;" class="">自动放烟花</a></div>

    <script>
        /*
            （1）对象：烟花 Fire
                【1】创建对象
                【2】描述对象
                    属性：位置（水平和垂直位置），目标值,烟火的数量,爆炸半径
                    方法：
                        初始化：创建节点，添加样式，添加在页面中
                        移动：从底部往光标的位置 动画
                        爆炸：随机生成很多的烟火
                【3】操作对象

            （2）对象：烟火 Spark
                【1】创建对象
                【2】描述对象
                    属性：随机半径，烟火角度，当前的烟火对象，随机背景颜色,位置（left 和top）
                    方法：
                        初始化：创建对象，添加样式，添加在烟花中
                        移动：指定到相应的位置
                        移出：移出整个烟花（让爷爷移出我爸爸）
                【3】操作对象
        */
        window.onload = function () {
     
     
            let auto = document.querySelector('#auto');
            let flag = true;
            let timer;

            document.onclick = function (e) {
     
     
                if (flag) {
     
     
                    new Fire(e.clientX, e.clientY);
                }
            }

            // 自动放烟花
            auto.onclick = function (e) {
     
     
                if (flag) {
     
     
                    timer = setInterval(() => {
     
     
                        new Fire();
                        flag = false;
                    }, 1500)
                } else {
     
     
                    flag = true;
                    clearInterval(timer);
                }
                e.stopPropagation()
            }

            // 创建烟花
            function Fire(x, y) {
     
     
                this.left = x || getRandomNum(5, window.innerWidth - 5);
                this.top = y || getRandomNum(20, window.innerHeight - 100);
                this.qty = getRandomNum(15, 30);
                this.r = getRandomNum(100, 200);

                // 执行初始化
                this.init()
                this.move();
            }
            Fire.prototype = {
     
     
                constructor: Fire,
                init: function () {
     
     
                    this.dv = document.createElement('div');
                    this.dv.classList.add('fire');
                    this.dv.style.left = this.left + 'px';
                    document.body.appendChild(this.dv);
                    return this;
                },
                move: function () {
     
     
                    move(this.dv, {
     
      top: this.top, height: 3 }, () => {
     
     
                        this.boom();
                    })
                },
                // 根据烟火个数创建烟火对象那个
                boom: function () {
     
     
                    let deg = 360 / this.qty;
                    for (let i = 0; i < this.qty; i++) {
     
     
                        this.dv.style.background = 'rgba(0,0,0,0)'
                        // 把角度和半径传到烟火对象中
                        new Spark(deg * i, this.r, this.dv)
                    }
                }
            }
            Object.defineProperty(Fire.prototype, "constructor", {
     
      enumerable: false, writable: false });

            function Spark(deg, r, parent) {
     
     
                this.deg = deg;
                this.r = r;
                this.bgColor = getRandomColor();
                this.rad = Math.PI * this.deg / 180;
                this.left = this.r * Math.cos(this.rad);
                this.top = this.r * Math.sin(this.rad);
                this.parent = parent;
                this.init().move();
            }
            Spark.prototype = {
     
     
                constructor: Spark,
                init: function () {
     
     
                    this.span = document.createElement('span');
                    this.span.classList.add('spark');
                    this.span.style.background = this.bgColor;
                    this.parent.appendChild(this.span);
                    return this;
                },
                move: function () {
     
     
                    move(this.span, {
     
      left: parseInt(this.left), top: parseInt(this.top), opacity: 30 }, () => {
     
     
                        this.remove();
                    })
                },
                remove: function () {
     
     
                    // 把整个烟花从body的中移除
                    this.parent.remove()
                }
            }
            Object.defineProperty(Spark.prototype, "constructor", {
     
      enumerable: false, writable: false });
        }
    </script>
</body>

</html>

        html,
        body {
    
    
            overflow: hidden;
            height: 100%;
        }

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

        .fire {
    
    
            width: 3px;
            height: 30px;
            background: white;
            position: absolute;
            top: 100%;
        }

        .spark {
    
    
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 0;
            top: 0;
        }

// 生成一个任意范围内的随机整数
function getRandomNum(a, b) {
    
    
    if (a > b) {
    
    
        return parseInt(Math.random() * (a - b + 1)) + b
    }
    return parseInt(Math.random() * (b - a + 1)) + a
}

// 封装一个随机颜色（不依赖 getRandomNum(a, b))
function getRandomColor(a) {
    
    
    if (a === 16) {
    
    
        var str = '0123456789abcdef';
        var res = '';
        for (var i = 0; i < 6; i++) {
    
    
            var idx = parseInt(Math.random() * 16);
            res += str[idx];
        }
        return '#' + res;
    }

    var r = parseInt(Math.random() * 256);
    var g = parseInt(Math.random() * 256);
    var b = parseInt(Math.random() * 256);
    return 'rgb(' + r + ',' + g + ',' + b + ')'
}

/* 
    封装获取元素的函数：
    函数的实参形式：
    【1】#id名    表示通过id名获取元素
    【2】.class名 表示通过class名获取元素
    【3】标签名    表示同给标签名获取元素
*/
function getEle(ele) {
    
    
    // substr(参数1，参数2)
    // 参数1表示开始的索引位置
    // 参数2表示截取个数，如果没有参数2表示从开始位置截取到最后
    var str1 = ele.substr(0, 1); //拿到前面的字符
    var str2 = ele.substr(1);

    if (str1 === '#') {
    
    
        return document.getElementById(str2)
    } else if (str1 === '.') {
    
    
        return document.getElementsByClassName(str2);
    } else {
    
    
        return document.getElementsByTagName(ele);
    }
}

// 获取非行内样式的
function getStyle(ele, attr) {
    
    
    var style;
    if (window.getComputedStyle) {
    
    
        style = window.getComputedStyle(ele)[attr];
    } else {
    
    
        style = ele.currentStyle[attr];
    }
    return style;
}

// 动画函数
/*
    【1】dom节点
    【2】对象，要改变属性和属性值
    【3】回调函数（动画结束之后要执行的操作）
*/
function move(ele, obj, callback) {
    
    

    let timerLen = 0;
    for (const attr in obj) {
    
    

        // 防止抖动
        clearInterval(ele[attr]);

        timerLen++;
        ele[attr] = setInterval(() => {
    
    
            let curStyle;
            if (attr === 'opacity') {
    
    
                curStyle = getStyle(ele, attr) * 100;
            } else {
    
    
                curStyle = parseInt(getStyle(ele, attr));
            }
            let speed = (obj[attr] - curStyle) / 5;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);  //取整
            if (curStyle === obj[attr]) {
    
    
                clearInterval(ele[attr]);
                timerLen--
                if (timerLen === 0) {
    
    
                    callback && callback();
                }
            } else {
    
    
                if (attr === 'opacity') {
    
    
                    ele.style[attr] = (speed + curStyle) / 100;
                } else {
    
    
                    ele.style[attr] = speed + curStyle + 'px';
                }
            }
        }, 30)
    }
}

烟花----事件对象event

猜你喜欢