随机颜色随机盒子 - A8源码实例

基本信息

源码名称：随机颜色随机盒子

源码大小：1.87KB

文件格式：.html

开发语言：js

更新时间：2020-08-20

友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 3 元　

源码介绍

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机颜色</title>
    <style>
        .box {
            width: 60px;
            height: 60px;
            background: red;
            display: inline-block;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <button id="btn">生成</button>
    <div class="showbox" id="showbox"></div>
    <!-- 
        1、生成一个盒子(7、将随机颜色值(第6步)放入要生成的元素中)
        2、渲染至showbox(修改showbox的内容为所生成的盒子)(清除原有内容，再修改元素的内容)
        3、随机数量(调用getRand函数产生随机数量)
        4、循环执行以下 (1,2)操作randNum次
        5、先清空showbox原有的内容
        6、颜色要随机(先得有随机的颜色值，)[rgb(and,rand,rand)]rand是0~255之间的随机数
     -->
    <script>
        var btn = document.getElementById('btn');
        var showbox = document.getElementById('showbox');
        btn.onclick = function () {
            showbox.innerHTML = '';
            // 随机数量
            var randNum = getRand(1, 100);
            // 循环
            for (var i = 0; i < randNum; i  ) {

                // 生成盒子
                var colorRand = 'rgb('   getRand(0, 255)   ','   getRand(0, 255)   ','   getRand(0, 255)   ')';
                // console.log(colorRand)
                var box = '<div class="box" style="background:'   colorRand   '">'   (i   1)   '</div>';
                //渲染到showbox
                showbox.innerHTML  = box;
            }
        }
        function getRand(min, max) {
            return Math.round(Math.random() * (max - min)   min);
        }
    </script>
</body>
</html>