js的颜色变换，有写的不好的地方，欢迎留言互动

眼红的小孩

已于 2023-06-15 12:40:34 修改

阅读量57

点赞数 1

文章标签： javascript 数学建模开发语言

于 2023-06-15 12:25:23 首次发布

本文链接：https://blog.csdn.net/qq_63480508/article/details/131225322

版权


<!DOCTYPE html>

<html>

    <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>Document</title>

        <style>

            * {
                    
                margin: 0;

                padding: 0;

            }

            div.wrap {

                width: 990px;

                margin: 100px auto;

                border: 1px solid #00f;

                padding: 10px;

            }

            #btn {

                padding: 10px 20px;

            }

            ul {

                overflow: hidden;

                list-style: none;

                margin-top: 10px;

            }

            li {

                float: left;

                width: 70px;

                height: 70px;

                text-align: center;

                line-height: 70px;

                margin-right: 10px;

            }

        </style>

    </head>

    <body>

        <div class="wrap">

            <button id="btn">随机生成</button>

            <ul>

                <li id="min"></li>

            </ul>

        </div>

        <script src="Byr.js"></script>

    </body>

</html>
<script>
//创建了一个包含颜色数组的变量

var arrColor = ["red", "blue", "yellow", "pink", "silver", "gold", "coral", "chocolate"];

//获取ul标签用ul变量储存起来

    var ul = document.querySelector("ul");

//获取类为wrap用wrap变量储存起来

    var wrap = document.querySelector(".wrap");

//获取id为btn用btn变量储存起来

    var btn = document.querySelector("#btn");

//使用按钮的点击事件来生成一个包含随机颜色的列表

    btn.addEventListener("click", function () {

    ul.innerHTML = "";

    //使用了循环和随机数生成器来随机选择颜色，并将它们应用到列表项的背景颜色上;

    for (let i = 0; i < 12; i++) {

        var num = Math.floor(Math.random() * arrColor.length);

        var li = document.createElement("li");

        li.innerHTML = i;

        li.style.backgroundColor = arrColor[num];

        //将一个列表项添加到一个无序列表中，然后将该无序列表添加到一个包含它的元素中。

        ul.appendChild(li);

        wrap.appendChild(ul);
		</script>
    }

});