JS实现自动在屏幕随机生成小星星，点击星星消失，使用事件委托优化

本文链接：https://blog.csdn.net/weixin_66106330/article/details/139681955

需求

1 每隔1s屏幕上就出现一个星星

2 img的大小是10-25px，位置随机，但是要在可视窗口之内

3 点击随便一个星星，星星消失

方法一如下：

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            position: absolute;
        }
    </style>
</head>

<body bgcolor="#000">
    <script>
        // 需求
        // 1 每隔1s我的屏幕上就出现一个星星
        // 2 img的大小是5-20px，位置随机，但是要在可视窗口之内
        // 3 把创建好的img标签插入到我的屏幕上
        // 4 点击随便一个星星，星星消失 
        // 0-1  random*10   0-10  [5,20)
        function rand(m, n) {
            var min = Math.min(m, n)
            var max = Math.max(m, n)
            min = Math.ceil(min) //向上取整
            max = Math.floor(max) //向下取整
            return min + Math.random() * (max - min)
        }


        setInterval(
            function () {
                var img = document.createElement('img')
                img.src = './imgs/star.gif'
                //给星星图片随机5-25px大小
                img.width = rand(5, 50)
                img.height = img.width
                //随机定位到窗口任意位置
                img.style.left = rand(0, window.innerWidth - img.width) + 'px'
                img.style.top = rand(0, window.innerHeight - img.height) + 'px'
                document.body.appendChild(img)
                var imgs = document.querySelectorAll('img')
                for (var i = 0; i < imgs.length; i++) {
                    imgs[i].onclick = function () {
                        // console.log(imgs[i]) //动态变化用索引捕获不到
                        // console.log(this) //用this指向可以
                        this.remove()
                    }
                }
            }, 1000
        )
    </script>
</body>

</html>

此方法每次计时要进行i循环，而且循环呈线性增长，故可用父元素添加事件委托实现优化

方法2：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

        // 一个随机数函数 在输入的m和n之间生成一个随机数
        function rand(m, n) {
            var min = Math.min(m, n)
            var max = Math.max(m, n)
            return min + Math.random() * (max - min)
        }

        setInterval(
            function () {
                var img = document.createElement('img')
                img.src = './imgs/star.gif'
                img.width = rand(10, 25)
                img.height = img.width
                img.style.left = rand(0, window.innerWidth - img.width) + 'px'
                img.style.top = rand(0, window.innerHeight - img.height) + 'px'
                document.body.appendChild(img)
            }, 1000
        )
        //给body元素绑定点击事件
        document.body.onclick = function () {
            //event.target指向事件源
            var target = event.target
            target.remove()
        }
    </script>
</body>
<style>
    img {
        position: absolute;
    }
    body{
        background-color: black;
    }
</style>
</html>

星星图：