【一】案例练习JavaScript实现随机颜色

需求：该函数接收一个布尔类型参数，表示颜色的格式是十六进制还是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 返回值，否则默认为undefined
          return `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 返回值，否则默认为undefined
          return `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。