【一】案例练习JavaScript实现随机颜色
创始人
2025-05-30 02:52:58

需求:该函数接收一个布尔类型参数,表示颜色的格式是十六进制还是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。

相关内容

热门资讯

酒便利控股股东变更:天音控股旗... 控股权被拍卖之后,酒便利迎来了新的控股方。1月20日下午,南都湾财社-酒水新消费指数课题组记者注意到...
田间地头到政策落地 审计助力乡... 习近平总书记深刻指出,中国要强,农业必须强;中国要美,农村必须美;中国要富,农民必须富。作为农业大市...
官宣!万亿GDP俱乐部,又扩容... 文丨西部君全国“万亿GDP俱乐部”,迎来新成员。日前,温州市政府工作报告披露:2025年,温州地区生...
四大重磅信号!国家发改委:正研... 图片来源:摄图网全文共4051字,阅读全文约需9分钟2026年工作将围绕布局高新技术工程、扩大内需、...