javaScript | 练习：利用Math函数的相关应用，实现随机生成颜色取值，随机改变页面上一个div元素的背景颜色，使得每次刷新都会使div盒子呈现不同的颜色

本文链接：https://blog.csdn.net/ZM20170703/article/details/136676431

结果展示，每次刷新都会生成背景颜色的div

示例代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 20rem;
        height: 20rem;
        border: 2px solid black;
        margin: 0 auto;
        /* 使其显示在屏幕中央 */
    }
</style>

<body>
    <div></div>
    <script>
        // 1.定义一个生成随机颜色函数
        function getRandomColor(flag = true) {
            // flag = true 是将flag的默认值设为true的意思
            // 当没有实参传入就默认是为true 

            if (flag) {
                // 3.如果传入的实参是 true 则返回 #ffffff 类型颜色数据
                let str = '#' // 用于拼接成 合格的颜色数据类型
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
                    '9', 'a', 'b', 'c', 'd', 'e', 'f'] // 定义一个数组 用于合法抽取
                // 利用for循环 随机抽取6次 累加到str里
                for (let i = 1; i <= 6; i++) {
                    // 每次要随机从数组中抽取一个 
                    // random 是数组的索引号 是随机的
                    let random = Math.floor(Math.random() * arr.length)
                    str += arr[random]  // 最终：str = #?????? 组成的随机颜色 
                }
                // 循环结束 返回颜色值
                return str

            } else {
                // 4.否则是false 则返回rgb(255,255,255)
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
            }
            return `rgb(${r},${g},${b})`
        }


        // 2.调用这个函数
        // getRandomColor(false)

        // 5.随机改变div的背景颜色
        const div = document.querySelector('div')
        div.style.backgroundColor = getRandomColor()

    </script>

</body>

</html>

考察知识点：

JavaScript函数、条件语句、循环、数组操作、DOM操作以及CSS样式设置的理解和应用

代码的详细解析：

1. HTML部分

HTML部分很简单，包含一个div元素和一个script标签。div元素用于在页面上显示，script标签则包含JavaScript代码。

2. CSS部分

CSS部分设置了div元素的样式，包括宽度、高度、边框和居中显示。这样，div元素会以一个正方形的形式显示在屏幕中央。

3. JavaScript部分

a. getRandomColor 函数

这个函数用于生成随机颜色。它接受一个参数flag，该参数的默认值为true。

如果flag为true（或没有传入参数，因为默认值为true），函数会生成一个十六进制颜色代码（如#ffffff）。它首先创建一个字符串str，然后通过一个循环从预定义的数组arr中随机选择字符，并将这些字符拼接到str中，最终形成一个六位十六进制数。

如果flag为false，函数会生成一个RGB颜色代码（如rgb(255,255,255)）。它分别生成三个0到255之间的随机数，分别代表红色、绿色和蓝色的分量。