js实现100个不同大小，颜色，位置小球的出现

最新推荐文章于 2022-12-01 16:48:24 发布

原创最新推荐文章于 2022-12-01 16:48:24 发布 · 909 阅读

4 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

57 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript创建的随机彩球动画效果。通过设置定时器，每隔一段时间在页面上随机生成不同大小、颜色和位置的小球，营造出炫酷的视觉效果。

思路：
1.创建一个放置小球的盒子
2.定义一个定时器，记录随机小球出现的时间
3.创建一个小球，并且得给它设置样式
4.利用Math.random个创建得小球定义随机的大小，颜色和位置
5.将创建的这个小球追加到刚开始创建的盒子里面

样式

      * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: black;
        }

        div .wrap {
            position: relative;
        }

        .wrap div {
            position: absolute;
            border-radius: 80px;
        }

<div class="wrap"></div>

js代码

var wrap = document.getElementsByTagName('div')[0];

        var timer = setInterval(randomball, 50);
        var num = 0;

        function randomball() {
            num++;
            //1创建
            var div = document.createElement('div');

            //随即大小
            var wh = ranFun(3, 30);
            div.style.width = wh + 'px';
            div.style.height = wh + 'px';

            //随机颜色
            var r = ranFun(0, 255);
            var g = ranFun(0, 255);
            var b = ranFun(0, 255);
            div.style.backgroundColor = 'rgba(' + r + ',' + g + ',' + b + ')';

            //随机位置
            div.style.left = ranFun(0, window.innerWidth - wh) + 'px';
            div.style.top = ranFun(0, window.innerHeight - wh) + 'px';

            //2追加
            wrap.appendChild(div);
            if (num >= 100) {
                clearInterval(timer);
            }
        }

        function ranFun(min, max) {
            return Math.floor(Math.random() * (max - min + 1) + min)
        }