⼗六进制颜⾊值和rgb颜⾊值互相转换
在之前的⼀篇⽂章《》中,曾经写过将16进制的颜⾊转换为rgb颜⾊。
当然了,今天再看,还是有很多可以优化的地⽅,所以对之前的代码重构了⼀遍,并且同时写了⼀个反向转换(也就是将rgb颜⾊值转换为字符串形式的16进制的颜⾊值)函数。
16进制转换rgb:
function transferColorToRgb(color) {
if (typeof color !== 'string' && !(color instanceof String)) ("请输⼊16进制字符串形式的颜⾊值");
color = color.charAt(0) === '#' ? color.substring(1) : color;
if (color.length !== 6 && color.length !== 3) ("请输⼊正确的颜⾊值")
if (color.length === 3) {
color = place(/(\w)(\w)(\w)/, '$1$1$2$2$3$3')
}
var reg = /\w{2}/g;
var colors = color.match(reg);
for (var i = 0; i < colors.length; i++) {
colors[i] = parseInt(colors[i], 16).toString();
}
return 'rgb(' + colors.join() + ')';
}
调⽤时,参数形式可以为带“#”号,也可以不带,实际颜⾊值可以为3位,也可以为6位,如: "#ffffff"、"#fff"、"ffffff"、"fff"。
其中涉及到了利⽤正则表达式对3位16进制的颜⾊值转换为6位的数值。
rgb颜⾊值转为为16进制的颜⾊值:
function transferRgbToStr(color) {substring和slice
if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) ("请输⼊rgb形式的颜⾊值");
color = place(/\s+/g, '');
var index = color.indexOf('(') + 1;
//注意: String 的slice⽅法,slice⽅法参数为负数时,即为倒数
// substring ⽅法参数为负数时,全都认为是0
var colors = color.slice(index, -1).split(',').slice(0, 3);
for (var i = 0; i < colors.length; i++) {
if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0)
("颜⾊值范围在0到255之间,请注意输⼊值!")
colors[i] = parseInt(colors[i], 10).toString(16);
if (colors[i].length === 1) {
colors[i] = "0" + colors[i]
}
}
return colors.join("");
}
调⽤时,参数形式可以为带“rgb()”形式的,也可以为"rgba()"形式的数据,如: rgb(122,23,1) 、rgba(123,23,12,0.5)。
需要注意的是:
var colors = color.slice(index, -1).split(',').slice(0, 3);
这⼀句代码当中,有两个slice⽅法,⼀个是字符串⽅法,⼀个是数组⽅法,尽管他们的⽤法⼀样,仍然需要谨慎。
还涉及到了String⽅法中的substring和slice⽅法使⽤上的区别,主要是参数为负数时,两者不同的处理⽅式。slice当做倒数,也就是从后往前数,⽽sunstring则完全认作是0。请在不同的场景下正确使⽤两个⽅法。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论