哪个网页输入rgb值后就可以显示出转换的10进制值?
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了哪个网页输入rgb值后就可以显示出转换的10进制值?相关的知识,希望对你有一定的参考价值。
参考技术A 恩恩,输入rgb值也可以显示正常的颜色, 如果在代码写rgb就是rgb值,不会自动改为10进制追问我说的是网页?哪个网页?
追答哦哦, 理解错了, 不过我取色都是用火狐的colorzilla插件,不知道你是不是用火狐浏览器
参考技术B RGB颜色查询对照表http://www.supfree.net/search.asp?id=6094
JavaScript之颜色值相互转换十六进制正则rgbtoStringslicetoUpperCasesplitfiltermapparseInt
文章目录
1、前言
两个函数均为做任何输入校验,在真实项目中需自行做输入校验。
2、RGB颜色值转换成十六进制颜色码
function transformationHexadecimal(arr = [7, 7, 7])
let strHex = '';
for (let i = 0; i < arr.length; i++)
let hex = '0' + arr[i].toString(16);
hex = hex.slice(-2);
strHex += hex;
strHex = strHex.toUpperCase();
return strHex;
console.log(transformationHexadecimal([57, 107, 90]));
// 396B5A
☺☺☺☺☺☺☺
arr
在形参中做了默认值处理,这是ES6
的写法。其中数组的第一项代表red
;第二项代表green
;第三项代表blue
;也就是所谓的rgb
。
第一步:在函数顶部定义一个字符串类型的变量,名称为strHex
。
第二步:使用for
循环遍历数组。在for
循环里面定义一个字符串类型的变量,名称为hex
。循环里的第一行代码使用toString
字符串方法把十进制的数字转为十六进制,并且进行补0
操作。循环里第二行代码表示通过字符串的slice
方法获取上一行操作的倒数两个字符。循环里第三行代码是简单累加操作。
第三步:使用toUpperCase
方法把strHex
变量的值全部转为大写,这里的转大写只针对字母,对数字无效。
最后一步:通过return
返回值供外部使用。
3、十六进制颜色码转换成RGB颜色值
function transformationRGB(hex = '396B5A')
let regSplit = /([0-9a-fA-F]2)/,
rgb = hex.split(regSplit);
rgb = rgb.filter(item => item != "");
rgb = rgb.map(item => parseInt('0x' + item));
return rgb;
console.log(transformationRGB('7F7A09'));
// [127, 122, 9]
☺☺☺☺☺☺☺
hex
在形参中做了默认值处理,这是ES6
的写法。字符串两两分组,共分为三组,第一组是39
,代表red
;第二组是6B
,代表green
;第三组是5A
,代表blue
。由这三组数据组成了rgb
的颜色值,需要写一个程序把它们转换成对应的rgb
值。
函数里的第一行代码表示定义一个正则表达式集合,正则集合的意思是匹配从0
到f
的值,字母不区分大小写,并且限制了只匹配两个字符。
函数里的第二行代码使用split
方法结合正则集合两两分割字符串为数组,这里得到的数组存在空字符。
函数里的第三行代码使用filter
方法过滤数组里面的空字符。
函数里的第四行代码使用map
和parseInt
方法把字符转成十进制,代码运行至此会得到一个纯数字类型的数组,数组的第一项表示red
;第二项表示green
;第三项表示blue
。
最后使用return
返回rgb
的值供外部使用。
4、演示
以上是关于哪个网页输入rgb值后就可以显示出转换的10进制值?的主要内容,如果未能解决你的问题,请参考以下文章
JS弹出框点击获取值后,自动关闭弹出框,然后刷新页面,文本框里里显示选择的信息。