汉川网站推广服务,福建百益建设集团有限公司网站,中国机械加工网18易8下4拉hu,便宜营销型网站建设优化建站背景
在标签功能中#xff0c;由于有「背景色」属性#xff0c;每次新增标签时都为选择哪种颜色犯难。因此#xff0c;我们思考如何通过JS代码生成随机颜色#xff0c;提取一个通用的随机颜色生成工具#xff0c;并基于React框架封装随机颜色选择器组件。
实际效果 原理…背景
在标签功能中由于有「背景色」属性每次新增标签时都为选择哪种颜色犯难。因此我们思考如何通过JS代码生成随机颜色提取一个通用的随机颜色生成工具并基于React框架封装随机颜色选择器组件。
实际效果 原理与思路
作为前端开发人员我们知道HTML接受 RGB、HEX、HSL三种格式的颜色。虽然是不同的格式但是它们的本质都是通过数字表达出颜色。
因为RGB、HEX、HSL 本身都是数字那么通过生成随机数并组装成符合格式要求的数字也就达到预期随机生成颜色的想法。
下面分别列举RGB和HEX格式的随机颜色生成思路
以RGB格式为例rbg(0,0,0)代表黑色rbg(255,255,255)代表白色。所以我们通过JS的Math.random方法随机生成3个0255之间的随机数并且取整将生成的三个随机数进行字符串拼接即可得到一个RGB格式的颜色。以HEX格式为例#000000代表黑色 #FFFFFF代表白色。可以发现hex格式通常都是6位16进制的数字每两位16进制数字分为一组比如12位代表red34代表blue56代表green。同样的道理通过Math.random方法随机生成3个0255之间的随机数通过JS的toString(16)方法将10进制随机数转化成16进制格式最后通过字符串拼接得到HEX格式的颜色。
核心代码
RBG格式随机颜色生成方法export function getRandomRGBColor(limit: number 256) {//十六进制颜色随机const r Math.floor(Math.random() * limit);const g Math.floor(Math.random() * limit);const b Math.floor(Math.random() * limit);const color rgb(${r},${g},${b});return color;
}HEX格式随机颜色生成方法export function getRandomHEXColor(limit: number 256) {const getRandomHexNumber (limit: number): string {let randomNum Math.floor(Math.random() * limit).toString(16);if (randomNum.length 2) {randomNum 0 randomNum;}return randomNum;};//十六进制颜色随机const r getRandomHexNumber(limit);const g getRandomHexNumber(limit);const b getRandomHexNumber(limit);const color #${r}${g}${b};return color;
}React组件
这是标签背景随机颜色选择器的React组件代码实现是非常简单的可以直接复制使用。
实际运行效果可以看本文最开始的「实际效果」截图。对于标签功能感兴趣的可以访问
标签 - 乐闻世界
import { useMemo, useState } from react;
import { getRandomColor } from /utils/color;
import classnames from classnames;
import { Check, Refresh } from icon-park/react;
import { nanoid } from nanoid;interface ColorSelectProps {defaultValue: string;value?: string;onChange?: (value: string) void;
}export default function ColorSelect(props: ColorSelectProps) {const { defaultValue, value, onChange } props;// 用于重新生成颜色const [randomId, setRandomId] useState();const colors useMemo(() {// 随机生成6个颜色return new Array(6).fill(0).map(() getRandomColor());}, [randomId]);const targetColors useMemo(() {// 过滤是否存在默认值的情况return [...colors, defaultValue || ].filter(v !!v ![#].includes(v),);}, [defaultValue, colors]);return (div classNameflex gap-2{targetColors.map(color {console.log(color---, color);return (divkey{color}data-color{color}onClick{() onChange?.(color)}className{classnames(h-8 w-8 cursor-pointer flex justify-center items-center,)}style{{ backgroundColor: color }}{value color (Check thememulti-color size24 fill#fff /)}/div);})}divclassNameh-8 w-8 cursor-pointer flex justify-center items-center border border-solid border-color-BGBrown text-color-BGBrown text-P4-RegularonClick{() setRandomId(nanoid())}Refresh themeoutline size18 fill#333 //div/div);
}
