<script>

        let button = document.querySelector('button');                //获取按钮
        let body = document.getElementById('body');                   //获取body元素

        button.onclick = function () {                            //按钮绑定点击事件
            let clock = setInterval(function () {          //计时器，循环，调用函数
                bubbling();
            }, 1000)
        }
        function bubbling() {
            let dom = document.createElement('div');                  //  点击过后创建元素
            body.appendChild(dom);                            //把创建的元素放到body里面
            let width = randomNum(0, 500),       //调用随机函数，随机宽
                height = width,               //随机高
                backg = `rgb(${randomNum(255)},${randomNum(255)},${randomNum(255)})`,    //随机颜色
                x = randomNum(innerWidth),          //屏幕宽的随机位置
                y = randomNum(innerHeight),         //屏幕高的随机位置
                w = 0,  //宽高自增/半径
                op = 1;        //透明度
            let clock = setInterval(function () {              //时钟
                if (w > width) {                        //判断当我宽高自增到大于，随机出来的数目时，结束时钟。并且删除标签
                    clearInterval(clock);
                    document.body.removeChild(dom);     //删除body下的标签
                }
                dom.style.cssText = `
                 width:${w++}px;               
                 height:${w++}px;
                 background-color: ${backg};
                 border-radius: 50%;
                 position: absolute;
                 top:${y - w / 2}px;
                 left:${x - w / 2}px;
                 opacity:${op -= 0.01};
                 `;                             //由于样式是不断变化的，所以这里添加的属性值是不固定的，是随机函数随机出来的，这样也就保证了，样式的多样性
            }, 60)
        }
    </script>