js面向对象实现：随机个数、随机大小、随机颜色、随机位置的圆

最新推荐文章于 2021-06-16 03:40:22 发布

冒蓝火的键盘

最新推荐文章于 2021-06-16 03:40:22 发布

阅读量1.6k

点赞数 4

本文链接：https://blog.csdn.net/ZZ_1998__/article/details/111302111

版权

废话不多说直接上代码

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
        * {
            padding: 0;
            margin: 0;
        }

        div .wrap {
            position: relative;
        }

        .wrap div {
            position: absolute;
            border-radius: 50%;
        }

    </style>
</head>

<body>
    <div class="wrap">

    </div>

    <script>
 
        var mybox = document.getElementsByClassName("wrap")[0]; // 创建元素
         var num = 0;
         var time = setInterval(creatball, 800); // 设置定时器


         // 创建小球函数

         function creatball() {
             // 创建元素
             var mydiv = document.createElement("div");
             var wh = random(200, 5);
             num++;
 
            // 设置宽高

            mydiv.style.width = wh + "px";
            mydiv.style.height = wh + "px";


            // 设置元素背景颜色
            mydiv.style.background = rancolr();
            
            // 随机位置
            mydiv.style.left = random(0, window.innerWidth - wh) +"px";
            mydiv. style.top = random(0, window.innerHeight - wh) +"px";
            mybox.appendChild(mydiv);
        }

        // 随机颜色
        
        function rancolr() {
            var r = parseInt(Math.random() * 256);
            var g = parseInt(Math.random() * 256);
            var b = parseInt(Math.random() * 256);
            var rgb = "rgb(" + r + "," + g + "," + b + ")";
            return rgb;
        }
        
        // 随机数

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


    </script>
</body>

</html>

冒蓝火的键盘

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
3
评论
js面向对象实现：随机个数、随机大小、随机颜色、随机位置的圆

面向对象实现：随机个数、随机大小、随机颜色、随机位置的圆废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style
复制链接

扫一扫