随机更改颜色案例_题目2:生成随机颜色。分析:该函数接收一个布尔型的参数,表示颜色是十六进制还-CSDN博客

本文链接：https://blog.csdn.net/qq_50260510/article/details/129670565

该文章提供了一个JavaScript函数，该函数根据布尔参数决定生成随机的16进制颜色代码或RGB颜色代码。当参数为true或未提供时，生成16进制颜色；参数为false时，生成RGB颜色。示例代码包括了生成随机16进制字符串和RGB字符串的实现。

摘要由CSDN通过智能技术生成

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。

①：如果参数传递的是 true 或者无参数，则输出一个随机十六进制的颜色

②：如果参数传递的是 false ，则输出一个随机rgb的颜色

核心思路

1.实现传入不同参数，返回不同字符串

2.实现随机16进制字符串

3.实现rgb模式的颜色

第一步：定义函数（布尔类型）

大致生成一个框架，后续在更改内容

<!DOCTYPE html>
<html lang="en">
<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>随机颜色案例</title>
    <!-- 需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
    ①：如果参数传递的是 true 或者无参数，则输出一个随机十六进制的颜色
    ②：如果参数传递的是 false ，则输出一个随机rgb的颜色 -->
</head>
<body>
    <script>
        // 核心思路
        // 1.实现传入不同参数，返回不同字符串
        // 2.实现随机16进制字符串
        // 3.实现rgb模式的颜色

        // 1.定义函数 （布尔类型）
        function randomColor(isHex = true) {
            // 如果true ， 生成16进制的字符串
            if (isHex) {
                return '#0094FF'
            } else {
                // 如果 false，生成 rgb 的字符串
                return 'rgb(255,235,233)'
            }
        }

        console.log(randomColor(true))
        console.log(randomColor(false))
        console.log(randomColor())

    </script>
    
</body>
</html>

效果展示：

第二步：生成随机的16进制字符串

<!DOCTYPE html>
<html lang="en">
<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>随机颜色案例</title>
    <!-- 需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
    ①：如果参数传递的是 true 或者无参数，则输出一个随机十六进制的颜色
    ②：如果参数传递的是 false ，则输出一个随机rgb的颜色 -->

    <!-- 核心思路
        1.实现传入不同参数，返回不同字符串
        2.实现随机16进制字符串
        3.实现rgb模式的颜色 -->
</head>
<body>
    <script>
        // 颜色数组： 0 - 9 ； A - F ；全局变量
        let arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']

        // 1.定义函数 （布尔类型）
        function randomColor(isHex = true) {
            // 如果true ，生成16进制的字符串
            if (isHex) {
                // 第二步：生成随机的16进制字符串！！！
                // 1.定义一个str，准备拼接
                let str = ''
                // 2.去arr中随机取一个字符
                for (let i = 0 ; i < 6 ; i++) {
                let index = Math.floor(Math.random() * arr.length)
                // 循环六次，取六个数组成十六进制字符
                str += arr[index]
            }
            // 3.在生成的六位随机数前面用拼接的方式加'#'
            return '#' + str
            } else {
                // 如果 false，生成 rgb 的字符串
                return 'rgb(255,235,233)'
            }
        }


        console.log(randomColor())
    </script>
    
</body>
</html>

第三步：生成随机的rgb模式字符串

<!DOCTYPE html>
<html lang="en">
<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>随机颜色案例</title>
    <!-- 需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式。
    ①：如果参数传递的是 true 或者无参数，则输出一个随机十六进制的颜色
    ②：如果参数传递的是 false ，则输出一个随机rgb的颜色 -->

    <!-- 核心思路
        1.实现传入不同参数，返回不同字符串
        2.实现随机16进制字符串
        3.实现rgb模式的颜色 -->
</head>
<body>
    <script>
        // 颜色数组： 0 - 9 ； A - F ；全局变量
        let arr = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F']

        // 1.定义函数 （布尔类型）
        function randomColor(isHex = true) {
            // 如果true ，生成16进制的字符串
            if (isHex) {
                // 第二步：生成随机的16进制字符串
                // 1.定义一个str，准备拼接
                let str = ''
                // 2.去arr中随机取一个字符
                for (let i = 0 ; i < 6 ; i++) {
                let index = Math.floor(Math.random() * arr.length)
                // 循环六次，取六个数组成十六进制字符
                str += arr[index]
            }
            // 3.在生成的六位随机数前面用拼接的方式加'#'
            return '#' + str
            } else {
                // 如果 false，生成 rgb 的字符串
                // 第三步：随机生成rgb模式的字符串 （0-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})`
            }
        }

        console.log(randomColor())
        console.log(randomColor(true))
        console.log(randomColor(false))


        // 浏览器变色
        document.querySelector('body').style.backgroundColor = randomColor()
    </script>
    
</body>
</html>

效果展示：