使用React实现随机颜色选择器,JS如何生成随机颜色

背景

在标签功能中,由于有「背景色」属性,每次新增标签时都为选择哪种颜色犯难。因此,我们思考如何通过JS代码生成随机颜色,提取一个通用的随机颜色生成工具,并基于React框架封装随机颜色选择器组件。

实际效果

原理与思路

作为前端开发人员,我们知道HTML接受 RGB、HEX、HSL三种格式的颜色。虽然是不同的格式,但是它们的本质都是通过数字表达出颜色。

因为RGB、HEX、HSL 本身都是数字,那么通过生成随机数并组装成符合格式要求的数字,也就达到预期随机生成颜色的想法。

下面分别列举RGB和HEX格式的随机颜色生成思路

  • 以RGB格式为例,rbg(0,0,0)代表黑色,rbg(255,255,255)代表白色。所以我们通过JS的Math.random方法随机生成3个0~255之间的随机数,并且取整,将生成的三个随机数进行字符串拼接即可得到一个RGB格式的颜色。
  • 以HEX格式为例,#000000代表黑色, #FFFFFF代表白色。可以发现hex格式通常都是6位16进制的数字,每两位16进制数字分为一组,比如1~2位代表red,3~4代表blue,5~6代表green。同样的道理,通过Math.random方法随机生成3个0~255之间的随机数,通过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 className="flex 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 theme="multi-color" size="24" fill="#fff" />)}</div>);})}<divclassName="h-8 w-8 cursor-pointer flex justify-center items-center border border-solid border-color-BGBrown text-color-BGBrown text-P4-Regular"onClick={() => setRandomId(nanoid())}><Refresh theme="outline" size="18" fill="#333" /></div></div>);
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/224788.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RabbitMQ 命令

Docker # 进入容器 > docker exec -it rabbitmq /bin/bash# 帮助 > rabbitmq-service help# 查看所有队列 > rabbitmqctl list_queues Windows 进入安装目录【D:\Program Files\RabbitMQ Server\rabbitmq_server-3.9.10\sbin】输入cmd # 帮助 > rabbitmq-servic…

在Node.js中停止使用dotenv

dotenv 是一个从 .env 文件中加载环境变量的包&#xff0c;npm 周下载量有三千五百万。在 Node.js v20.6.0 中&#xff0c;已经内置了对 .env 文件的支持&#xff0c;这篇文章将演示如何在 Node.js 中访问 .env 中的环境变量。 配置 创建一个最简单的 Express 应用程序&#…

融云即时通讯的产品优势

1、开箱即用的 UI 组件 让开发者不用撰写 UI 界面代码即可快速实现 IM 功能 2、健壮稳定 全球范围提供多个数据中心、物理覆盖全球用户 3、快速接入 标准通信功能 1 天即可快速接入 4、接口丰富 满足复杂业务需求 详情查看&#xff1a;融云-为用户提供IM即时通讯和实时音视频通…

Parade Series - Message Interaction

if (true) {Swal.fire("节目发布", "发布完毕", "success");event.preventDefault(); } if (false) {Swal.fire("节目发布", "发布失败", "error");event.preventDefault(); }if (true) {for (var i 0; i < b…

AI日报:OpenAI向新用户重新开放ChatGPT Plus订阅

欢迎订阅专栏 《AI日报》 获取人工智能邻域最新资讯 文章目录 总览Chatgptplus重新开放订阅#暂停原因功能 OpenAI的1000万美元安全人工智能拨款拨款初衷学术捐赠 总览 ChatGPT Plus再次向新用户开放&#xff0c;但目前每三小时限制发送40条消息。 OpenAI还宣布拨款1000万美元…

点云从入门到精通技术详解100篇-基于单双目结合的结构光三维重建

目录 前言 国内外研究现状 三维测量技术研究现状 结构光研究现状

微信小程序 - 龙骨图集拆分

微信小程序 - 龙骨图集拆分 注意目录结构PC端延时动画废话一下业务逻辑注意点龙骨JSON图集结构源码分享dragonbones-split.jsdragonbones-split.jsondragonbones-split.wxmldragonbones-split.wxssimgUtil.js参考资料注意 只支持了JSON

数据结构-07-二叉树

前面学习的栈、队列等等都是线性表结构。树是一种非线性表结构&#xff0c;比线性表的数据结构要复杂。 1-树tree “树”这种数据结构类似我们现实生活中的“树”&#xff0c;这里面每个元素我们叫作“节点”&#xff1b;用来连线相邻节点之间的关系&#xff0c;我们叫作“父子…

Kafka Avro序列化之三:使用Schema Register实现

为什么需要Schema Register 注册表 无论是使用传统的Avro API自定义序列化类和反序列化类 还是 使用Twitter的Bijection类库实现Avro的序列化与反序列化,这两种方法都有一个缺点:在每条Kafka记录里都嵌入了schema,这会让记录的大小成倍地增加。但是不管怎样,在读取记录时…

云端赋能大湾区:华为云照亮数字化转型之路

编辑&#xff1a;阿冒 设计&#xff1a;沐由 在中国的经济版图上&#xff0c;大湾区是极其重要的增长引擎。这块富有活力和创新力的经济区域里&#xff0c;荟聚了大量的高新技术企业&#xff0c;以及一批创新孵化器和科研机构&#xff0c;产业升级和技术创新的氛围格外浓烈。 1…

山峰个数 - 华为OD统一考试

OD统一考试 分值: 100分 题解: Java / Python / C++ 题目描述 给定一个数组,数组中的每个元素代表该位置的海拔高度。0表示平地,>=1时表示属于某个山峰,山峰的定义为当某个位置的左右海拔均小于自己的海拔时,该位置为山峰。数组起始位置计算时可只满足一边的条件。 …

lv12 linux内核的安装与加载

目录 1 tftp加载Linux内核及rootfs 1.1 uboot内核启动命令 1.2 uboot自启动参数环境变量 1.3 实验 2 EMMC加载Linux 内核及rootfs ​编辑 2.1 emmc中写入uimage ​编辑 2.2 emmc中写入dtb 2.3 emmc中写入根文件系统 2.4 设置环境变量 3 tftp加载Linux内核nfs挂载ro…

centos 手动编译安装git

原因 由于centos自带的git版本太低&#xff0c;使用git的时候会出现很多问题&#xff0c;但是尝试了各种办法无法直接更新git版本&#xff0c;所以最后自己手动编译安装git 在github下载源码&#xff0c;下载解压之后&#xff0c;上传到服务器&#xff0c;我上传到 /home/user…

用python做餐饮业的数据分析

问题: 1&#xff0c;订单表的长度 shape columns 2&#xff0c;统计菜单的平均价格&#xff08;amount&#xff09; 3&#xff0c;什么菜最受欢迎 订单 客户 时间 菜品 这几个维度 4&#xff0c;哪个订单ID点的菜最多等问题 首先在jupyter note里导入模块 import numpy …

探索多功能SQL数据库编辑器 - Richardson Software RazorSQL

在当今数字化时代&#xff0c;SQL数据库的管理和编辑是许多企业和开发人员必不可少的任务。为了提高生产力和简化数据库操作&#xff0c;Richardson Software推出了一款强大而多功能的SQL数据库编辑器 - RazorSQL。 RazorSQL是一款功能全面的数据库管理工具&#xff0c;可适用…

LeetCode(61)删除链表的倒数第 N 个结点【链表】【中等】

目录 1.题目2.答案3.提交结果截图 链接&#xff1a; 删除链表的倒数第 N 个结点 1.题目 给你一个链表&#xff0c;删除链表的倒数第 n 个结点&#xff0c;并且返回链表的头结点。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4,5], n 2 输出&#xff1a;[1,2,3,5]示例…

Lua 元表,元方法

元表与元方法的概念 Lua中每个值都可具有元表。元表是普通的Lua表,定义了原始值在某些特定操作下 的行为。 例如,当table作为加法的操作数时,Lua检查其“元表”中的“__add”字段是否有 个函数。如果有,Lua调用它执行加法。我们称“元表”中的“键(如__add)”为事件(event),称…

【STM32独立看门狗(IWDG) 】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、看门狗是什么&#xff1f;1.简介2. 主要功能3.独立看门狗如何工作4.寄存器写保护5.看门狗 看门时间 二、使用步骤1.开启时钟2.初始化看门狗3.开启看门狗4.喂…

ACL和NAT

文章目录 ACL和NAT一、ACL概述及产生背景1、ACL访问控制列表2、ACL工作原理3、ACL种类4、ACL命令配置步骤4.1 ACL命令配置4.1 ACL配置步骤 二、NAT&#xff08;网络地址转换&#xff09;1、NAT概述2、NAT类型2.1 静态NAT与动态NAT 3、NATPT&#xff08;端口映射&#xff09;4、…

详解—【C++】lambda表达式

目录 前言 一、lambda表达式 二、lambda表达式语法 2.1. lambda表达式各部分说明 2.2. 捕获列表说明 三、函数对象与lambda表达式 前言 在C98中&#xff0c;如果想要对一个数据集合中的元素进行排序&#xff0c;可以使用std::sort方法。 #include <algorithm> #i…