js源码之烟花特效

不多解释,直接上源码,纯手打,不借用任何插件

先来css代码

<style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 700px;
            background-color: hsl(0, 0%, 0%);
　　　　//给body添加一个overflow:hidden;可以让网页不显示滚动条
        }

        .fire {
            position: absolute;
            width: 8px;
            height: 16px;
            /* width: 30px;
            height: 30px; */
            border-radius: 100%;
        }

        .fires {
            width: 6px;
            height: 6px;
            position: absolute;
            border-radius: 3px;
        }
    </style>

html和js直接就放在一起了,因为html就是一个骨架,啥都没有,所有的元素都是通过js事件添加的

<!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>-烟火-</title>
</head>

<body>
    <script>
        //返回浏览器的宽度和高度
        const w = window.screen.availWidth;
        const h = window.screen.availHeight;
        //动态添加元素
        document.addEventListener("mousedown", function (e) {
            let div = document.createElement("div");
            div.className = 'fire';
            document.body.appendChild(div);
            let fire = document.getElementsByClassName("fire");
            fire[0].style.backgroundColor = color();
            //返回当前点击位置的相对坐标
            let clickX = e.clientX;
            let clickY = e.clientY;
            //设置盒子的初始位置
            fire[0].style.top = h + 'px';
            fire[0].style.left = clickX + 'px';
            // 调用定时器让盒子移动到当前的被点击的位置
            const speed = 13;
            let loop = setInterval(move, 30);
            function move() {
                if (fire[0].offsetTop - speed >= clickY) {
                    fire[0].style.top = fire[0].offsetTop - speed + 'px';
                } else {
                    clearInterval(loop);
                    fire[0].style.top = clickY + 'px';
                    document.body.innerHTML = '';
                    //在消失的瞬间调用函数,生成无数的盒子
                    stars(clickX, clickY);
                    //给每个div不同的定位属性
                }
            }
        });

        // console.log(color2())
        function stars(clickX, clickY) {
            let star_num = Math.ceil(Math.random() * 50 + 50);
            for (let i = 0; i <= star_num; i++) {
                let div = document.createElement("div");
                //给当前添加的div设置相同的定位,让div都在同一个位置
                div.style.backgroundColor = color();
                div.style.top = clickY + 'px';
                div.style.left = clickX + 'px';
                //并且给已经生成的div指定类名,也就是样式
                div.className = "fires";
                // 每车次生成小div的时候,同时生成无数的随机数,让每个div自带不同的数值
                let num1 = Math.random() * 20 - 10;
                let num2 = Math.random() * 20 - 10;
                // 这里设置不同的自定义属性是为了给不同的盒子,不同的初始速度,不然使用for循环添加动画的时候,所有的盒子都会以相同的速度移动,就没有了烟花的特效
                div.setAttribute("speed_X", num1);
                div.setAttribute("speed_Y", num2);
                document.body.appendChild(div);
            }
            //创建完所有的小盒子之后,使用新的函数给每个div设定不同的初速度
            // 让每个盒子以不同的初速度移动
            speed();
        }

        function speed() {
            // 设置定时器每次运动的时间差
            const body = document.querySelector("body");
            const runningtime = .3;
            const divs = document.querySelectorAll(".fires");
            for (let i = 0; i < divs.length; i++) {
                const timer = setInterval(function () {
                    divs[i].style.top = divs[i].offsetTop - divs[i].getAttribute("speed_y") + "px";
                    divs[i].style.left = divs[i].offsetLeft - divs[i].getAttribute("speed_X") + "px";
                    divs[i].setAttribute("speed_y", divs[i].getAttribute("speed_y") - runningtime);

                    // 判断粒子的位置,如果粒子超出screen,就让粒子所对应的盒子从body中移除,不然动画停不下来,就容易造成卡顿
                    if (divs[i].offsetTop > h || divs[i].offsetLeft > w || divs[i].offsetLeft < 0) {
                        clearInterval(timer)
                        body.removeChild(divs[i]);
                    }
                }, 30);
            }
        }

        //动态生成颜色
        function color() {
            const num1 = Math.floor(Math.random() * 256);
            const num2 = Math.floor(Math.random() * 256);
            const num3 = Math.floor(Math.random() * 256);
            return "rgb(" + num1 + "," + num2 + "," + num3 + ")"
        }
　　
        function color2() {
            return "#" + function (color) {
                return new Array(7 - color.length).join("0") + color
            }((Math.random() * 0x1000000 << 0).toString(16))
        }

        //颜色 移位运算符
        function color3() {
            return "#" + (~~(Math.random() * (1 << 24))).toString(16)
        }

    </script>
</body>

</html>

附上截图

然后这是散开之后的截图了,技术有限,也就只能做成这样了,毕竟还是学者

结尾提供了几种大神提供的生成颜色的方式,然而我只会利用随机数生成255位的颜色,不过亲测有效(瞻仰大神);

js源码之烟花特效

猜你喜欢