需求:该函数接收一个布尔类型参数,表示颜色的格式是十六进制还是rgb格式。
分析:
①: 封装颜色函数 getRandomColor
②: 返回 rgb 格式颜色
③: 返回 #ffffff 格式颜色
function getRandomColor(flag = true) {if (flag) {// 生成rgb颜色let newArr = []for (let i = 0; i < 3; i++) {let random = parseInt(Math.random() * 256)newArr.push(random)}// 函数return 返回值,否则默认为undefinedreturn `rgb(${newArr[0]},${newArr[1]},${newArr[1]})`} else {// 生成16进制颜色let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']let str = '#'for (let i = 0; i < 6; i++) {let random = parseInt(Math.random() * 16) //获取0-15下标str += arr[random]}return str}}console.log(getRandomColor())console.log(getRandomColor(true))console.log(getRandomColor(false))
// 方法二 生成16进制function getRandomColor(flag = true) {let r = Math.floor(Math.random() * 256)let g = Math.floor(Math.random() * 256)let b = Math.floor(Math.random() * 256)if (flag) {// 生成rgb颜色// 函数return 返回值,否则默认为undefinedreturn `rgb(${r},${g},${b})`} else {// 生成16进制颜色// 将 RGB 值转换为十六进制颜色let hexColor = '#' + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)return hexColor}}console.log(getRandomColor())console.log(getRandomColor(true))console.log(getRandomColor(false))
转换为十六进制颜色时需要使用 JavaScript 中的位运算符和字符串 slice() 方法。其中 1 << 24 表示将 1 左移 24 位,即前 8 位为 0,后 24 位为 1,用于保证字符串长度为 6。toString(16) 表示将 RGB 值转换为 16 进制字符串,然后使用 slice(1) 方法去掉前面多余的一个 0。
“#” + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
这段代码的作用是将 RGB 值转换为十六进制颜色值,并且保证颜色值的字符串长度为 7,即 “#RRGGBB” 的形式。
具体来说,这段代码的执行步骤如下:
将 1 左移 24 位,即将二进制数 1 左移 24 位,得到 0x1000000。这个数用于保证 RGB 值转换为十六进制颜色值后,字符串长度为 7。
将 r 左移 16 位,即将二进制数 r 左移 16 位,得到 0xRR0000,其中 RR 表示 r 的十六进制值。这个值对应颜色值的红色分量。
将 g 左移 8 位,即将二进制数 g 左移 8 位,得到 0x00GG00,其中 GG 表示 g 的十六进制值。这个值对应颜色值的绿色分量。
直接使用 b 的十六进制值,得到 0x0000BB,其中 BB 表示 b 的十六进制值。这个值对应颜色值的蓝色分量。
将步骤 2、3、4 得到的三个值相加,得到一个 24 位的二进制数,即 0xRRGGBB。
使用 toString(16) 方法将上一步得到的数转换为十六进制字符串,这个字符串的长度可能小于 6。
使用 slice(1) 方法去掉字符串的第一个字符,即去掉字符串前面的一个 0,如果存在的话。
最后,在字符串前面加上 “#” 符号,得到一个完整的十六进制颜色值,例如 “#FF0000”。
综上所述,这段代码的作用是将 RGB 值转换为一个十六进制颜色值,并且保证颜色值的字符串长度为 7。