鼠标点击实现烟花

效果图

怎样实现鼠标点击出烟花

要先给页面添加点击事件，生成主体烟花，之后让它绽放。

1.CSS样式

 <style>
        /* 设置css样式 */
        body {
            background: #000;
            overflow: hidden;
        }
        .fire {
            position: absolute;
            width: 4px;
            height: 30px;
        }
    </style>

2.设置点击事件

//给页面设置点击事件
        document.onclick = function (eve) {
            var e = eve || window.event;
            //设置一个空数组,用来后面存放小烟花
            var arr = [];
            //获取鼠标点击的位置
            var x = e.clientX;
            var y = e.clientY;
            //设置步长
            var speed = 20;
            //生成大烟花,设置他的css样式,出发点在可视区页面的下方
            var fire = document.createElement('div');
            fire.className = 'fire';
            // randomColor随机颜色小脚本
            fire.style.background = randomColor();
            fire.style.left = x + 'px';
            fire.style.top = document.documentElement.clientHeight + 'px';
            //将大烟花追加到页面上
            document.body.appendChild(fire);
            //生成定时器
            var t = setInterval(function () {
            //判断如果大烟花的TOP值小于小于目标值,清除定时器,并且将大烟花清除
                if (fire.offsetTop <= y) {
                    clearInterval(t);
                    document.body.removeChild(fire);
                    //执行show(生成小烟花)
                    show();
                }
                //让大烟花垂直向上运动
                fire.style.top = fire.offsetTop - speed + 'px';
            }, 30);

3.循环，生成多个烟花，并添加样式

        循环里面