JS颜色随机生成(rgb、rgba、十六进制、格式转换)

2024-03-28 07:48

本文主要是介绍JS颜色随机生成(rgb、rgba、十六进制、格式转换),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

十六进制格式(#000000-#FFFFFF)

function randomHexColor() { //随机生成十六进制颜色var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数while (hex.length < 6) { //while循环判断hex位数,少于6位前面加0凑够6位hex = '0' + hex;}return '#' + hex; //返回‘#'开头16进制颜色
}

 RGB格式

function randomRgbColor() { //随机生成RGB颜色var r = Math.floor(Math.random() * 256); //随机生成256以内r值var g = Math.floor(Math.random() * 256); //随机生成256以内g值var b = Math.floor(Math.random() * 256); //随机生成256以内b值return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格式颜色
}

RGBA格式

function randomRgbaColor() { //随机生成RGBA颜色var r = Math.floor(Math.random() * 256); //随机生成256以内r值var g = Math.floor(Math.random() * 256); //随机生成256以内g值var b = Math.floor(Math.random() * 256); //随机生成256以内b值var alpha = Math.random(); //随机生成1以内a值return `rgb(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
}

十六进制转为RGB

function hex2Rgb(hex) { //十六进制转为RGBvar rgb = []; // 定义rgb数组if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数let sixHex = '#';hex.replace(/[0-9A-F]/ig, function(kw) {sixHex += kw + kw; //把三位16进制数转化为六位});hex = sixHex; //保存回hex}if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数hex.replace(/[0-9A-F]{2}/ig, function(kw) {rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组});return `rgb(${rgb.join(',')})`; //输出RGB格式颜色} else {console.log(`Input ${hex} is wrong!`);return 'rgb(0,0,0)';}
}

RGB转为十六进制

function rgb2Hex(rgb) {if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGBvar hex = '#'; //定义十六进制颜色变量rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字kw = parseInt(kw).toString(16); //转为十六进制kw = kw.length < 2 ? 0 + kw : kw; //判断位数,保证两位hex += kw; //拼接});return hex; //返回十六进制} else {console.log(`Input ${rgb} is wrong!`);return '#000'; //输入格式错误,返回#000}
}

这篇关于JS颜色随机生成(rgb、rgba、十六进制、格式转换)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/854932

相关文章

在Linux中改变echo输出颜色的实现方法

《在Linux中改变echo输出颜色的实现方法》在Linux系统的命令行环境下,为了使输出信息更加清晰、突出,便于用户快速识别和区分不同类型的信息,常常需要改变echo命令的输出颜色,所以本文给大家介... 目python录在linux中改变echo输出颜色的方法技术背景实现步骤使用ANSI转义码使用tpu

关于集合与数组转换实现方法

《关于集合与数组转换实现方法》:本文主要介绍关于集合与数组转换实现方法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Arrays.asList()1.1、方法作用1.2、内部实现1.3、修改元素的影响1.4、注意事项2、list.toArray()2.1、方

Mysql常见的SQL语句格式及实用技巧

《Mysql常见的SQL语句格式及实用技巧》本文系统梳理MySQL常见SQL语句格式,涵盖数据库与表的创建、删除、修改、查询操作,以及记录增删改查和多表关联等高级查询,同时提供索引优化、事务处理、临时... 目录一、常用语法汇总二、示例1.数据库操作2.表操作3.记录操作 4.高级查询三、实用技巧一、常用语

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

使用Python和OpenCV库实现实时颜色识别系统

《使用Python和OpenCV库实现实时颜色识别系统》:本文主要介绍使用Python和OpenCV库实现的实时颜色识别系统,这个系统能够通过摄像头捕捉视频流,并在视频中指定区域内识别主要颜色(红... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间详解

OpenCV实现实时颜色检测的示例

《OpenCV实现实时颜色检测的示例》本文主要介绍了OpenCV实现实时颜色检测的示例,通过HSV色彩空间转换和色调范围判断实现红黄绿蓝颜色检测,包含视频捕捉、区域标记、颜色分析等功能,具有一定的参考... 目录一、引言二、系统概述三、代码解析1. 导入库2. 颜色识别函数3. 主程序循环四、HSV色彩空间

苹果macOS 26 Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色

《苹果macOS26Tahoe主题功能大升级:可定制图标/高亮文本/文件夹颜色》在整体系统设计方面,macOS26采用了全新的玻璃质感视觉风格,应用于Dock栏、应用图标以及桌面小部件等多个界面... 科技媒体 MACRumors 昨日(6 月 13 日)发布博文,报道称在 macOS 26 Tahoe 中

C++ 函数 strftime 和时间格式示例详解

《C++函数strftime和时间格式示例详解》strftime是C/C++标准库中用于格式化日期和时间的函数,定义在ctime头文件中,它将tm结构体中的时间信息转换为指定格式的字符串,是处理... 目录C++ 函数 strftipythonme 详解一、函数原型二、功能描述三、格式字符串说明四、返回值五

java Long 与long之间的转换流程

《javaLong与long之间的转换流程》Long类提供了一些方法,用于在long和其他数据类型(如String)之间进行转换,本文将详细介绍如何在Java中实现Long和long之间的转换,感... 目录概述流程步骤1:将long转换为Long对象步骤2:将Longhttp://www.cppcns.c

C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式

《C#实现将Office文档(Word/Excel/PDF/PPT)转为Markdown格式》Markdown凭借简洁的语法、优良的可读性,以及对版本控制系统的高度兼容性,逐渐成为最受欢迎的文档格式... 目录为什么要将文档转换为 Markdown 格式使用工具将 Word 文档转换为 Markdown(.