JavaScript—生成随机颜色

文章目录

• • 问题需求
  • 需求分析
  • 代码实现
  • 小结

问题需求

随机生成颜色：定义一个函数，该函数接受一个布尔类型参数，表示颜色的格式是十六进制还是rgb格式，如果参数传递的是true或者无参数，则输出一个随机十六进制的颜色；如果参数传递的是false，则输出一个随机的rgb的颜色

需求分析

1. 先定义一个有参函数getRandomColor()，参数为布尔类型。
2. 在getRandomColor()通过if判断语句，判断输入的参数的布尔类型为true还是false。、
3. 如果为参数为true类型，则输出的是一个随机十六进制的颜色。十六进制的颜色前面为‘#’，因此需要定义一个字符串str='#'，然后定义一个包含16进制颜色字符数组arr=['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a','b', 'c', 'd', 'e', 'f']，通过循环6次，每次生成一个0到arr数组长度之间的随机整数random，并将对应索引的字符拼接到str中。最后通过字符串拼接生成一个随机十六进制的颜色。

   let srt = '#'
   let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a','b', 'c', 'd', 'e', 'f']
   for (let i = 0 ; i < 6 ; i++) {
       let random = Math.floor(Math.random() * arr.length)
       str += arr[random]
   }
   return str

4. 如果参数为false类型，则输出一个随机的rgd的颜色。rgb颜色的取值范围为：0~255，因此可以直接通过随机数函数生成出三个范围为0~255的随机整数。因为随机函数取值是左闭右开的因此M-N为256。

   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})`

5. 调用函数getRandomColor()即可。

整体代码实现

        function getRandomColor(flag = true) {
            if (flag) {
                let str = '#'
                let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a',
                    'b', 'c', 'd', 'e', 'f'
                ]
                for (let i = 1; i <= 6; i++) {
                    let random = Math.floor(Math.random() * arr.length)
                    str += arr[random]
                }
                return str
            } else {
                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(getRandomColor(true))

小结

本案例的代码适用于需要随机生成颜色的场景，通过修改 flag 参数的值，可以灵活地选择生成的颜色类型。