js----random随机小球

最新推荐文章于 2023-02-13 10:27:40 发布

大风起兮云飞扬啊

最新推荐文章于 2023-02-13 10:27:40 发布

阅读量1k

点赞数

文章标签： javascript css3 css

本文链接：https://blog.csdn.net/HLHis1996/article/details/121903968

版权

随机小球

<!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>随机小球</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            position: relative;

        }

        .dot {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            transition: all 1s ease-out;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <script>
        // 初始化加载
        window.onload = function () {
            createEle(createNumber(50));
            changeAnimation()
            let timer = null;
            const timeId = (func, interval) => {
                func();
                return setInterval(func, interval);
            };
            timer && clearInterval(timer);
            timer = timeId(changeAnimation, 1000);
        };
        // 创建数量
        function createNumber(nums) {
            let numberArr = [];
            let index = 0;
            do {
                index++;
                numberArr.push(index);
            } while (index < nums)
            return numberArr;
        }
        // 创建元素
        function createEle(smallNums) {
            smallNums.forEach(() => {
                let dot = document.createElement("div");
                dot.setAttribute("class", "dot");
                document.body.append(dot);
            })
        }
        // 获取元素
        function getEle() {
            let doms = document.getElementsByClassName("dot");
            return Array.from(doms);
        }
        // 获取随机值
        function getVariousVal(min, max) {
            min = Math.ceil(min);
            max = Math.floor(max);
            return Math.floor(Math.random() * (max - min + 1)) + min; // 含最大值 最小值
        }
        // 动画
        function changeAnimation() {
            let dotArr = getEle();
            dotArr.forEach((item) => {
                //生成随机左偏移量
                let dotLeft = getVariousVal(0, 1800);
                // 生成随机上偏移量
                let dotTop = getVariousVal(0, 800);
                // 生成随机rgb颜色----one
                let rgb_one = getVariousVal(0, 225);
                // 生成随机rgb颜色----two
                let rgb_two = getVariousVal(0, 225);
                // 生成随机rgb颜色----three
                let rgb_three = getVariousVal(0, 225);
                // 生成随机透明度
                let opacity = Math.random().toFixed(1);
                // 生成随机形状
                let circle = getVariousVal(0, 50);
                setVariousVal(item, dotLeft, dotTop, rgb_one, rgb_two, rgb_three, opacity, circle);
            })
        }
        // 设置随机值
        function setVariousVal(ele, left, top, colorOne, colorTwo, colorThree, opacity, circle) {
            // 设置左偏移量
            ele.style.left = left + "px";
            // 设置上偏移量
            ele.style.top = top + "px";
            // 设置透明度
            ele.style.opacity = opacity;
            // 设置随机形状
            ele.style.borderRadius = circle + "%";
            // 设置随机颜色
            ele.style.backgroundColor = `rgb(${colorOne},${colorTwo},${colorThree})`;
        }
    </script>
</body>

</html>