点击按钮随机生成任意颜色任意大小任意位置的圆

最新推荐文章于 2021-12-31 20:00:00 发布

苦瓜式的幽默

最新推荐文章于 2021-12-31 20:00:00 发布

阅读量784

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签： html5 javascript css3

本文链接：https://blog.csdn.net/are_gh/article/details/112004019

前端专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何通过HTML5的canvas元素，结合JavaScript和CSS3，实现在页面上点击按钮生成颜色、大小和位置都随机的圆形。用户每次点击都会产生一个新的随机圆。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击按钮随机生成任意颜色任意大小任意位置的圆

<!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>
        /* #box {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: red;
        } */
    </style>
</head>

<body>
    <div id="box">

    </div>
    <button id="btn">点击随机生成颜色高度位置任意的圆</button>
    <script>
        var boxyuan = document.getElementById('box');
        var btn = document.getElementById('btn');
        btn.onclick = function() {
            //随机颜色
            var rgb1 = Math.floor(Math.random() * 256);
            var rgb2 = Math.floor(Math.random() * 256);
            var rgb3 = Math.floor(Math.random() * 256);
            // var rgb4 = Math.floor(Math.random() * 256);
            //随机高度宽度
            var Width = Math.floor(Math.random() * 1000);
            console.log(Width);
            //随机定位
            var top_ps = Math.floor(Math.random() * 500);
            var left_ps = Math.floor(Math.random() * 1000);



            var code = 'rgba' + '(' + rgb1 + ',' + rgb2 + ',' + rgb3 + ')';
            console.log(code);
            //创建元素
            var box1 = document.createElement('div');
            box1.innerHTML = '我真美';


            box1.style.width = Width + 'px';
            box1.style.height = Width + 'px';
            box1.style.borderRadius = '50%';
            box1.style.backgroundColor = code;
            box1.style.position = 'absolute';
            box1.style.top = top_ps + 'px';
            box1.style.left = left_ps + 'px';
            //添加元素
            boxyuan.appendChild(box1);
        }
    </script>
</body>

</html>