javascript编写一个将十六进制值转换为颜色的函数
答案:3 悬赏:60 手机版
解决时间 2021-03-25 12:15
- 提问者网友:呐年旧曙光
- 2021-03-24 12:54
javascript编写一个将十六进制值转换为颜色的函数
最佳答案
- 五星知识达人网友:猎心人
- 2021-03-24 13:57
function getRGB(hex){
var rgb=[0,0,0];
if(/#(..)(..)(..)/g.test(hex)){
rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)];
};
return "rgb("+rgb.join(",")+")";
}
var rgb=[0,0,0];
if(/#(..)(..)(..)/g.test(hex)){
rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)];
};
return "rgb("+rgb.join(",")+")";
}
全部回答
- 1楼网友:千杯敬自由
- 2021-03-24 14:47
function getRGB(hex){ var rgb=[0,0,0]; if(/#(..)(..)(..)/g.test(hex)){ rgb=[parseInt(RegExp.$1,16),parseInt(RegExp.$2,16),parseInt(RegExp.$3,16)]; }; return "rgb("+rgb.join(",")+")";}
- 2楼网友:舊物识亽
- 2021-03-24 14:23
"如果输入值不完整,对应的颜色值取0"
这点不可能的, 谁知道你是漏了哪个参数! 参数需要严格对应!(请注意rgba和hsla都是有四个参数的)
以下是约定各变量的范围
R [0, 255]
G [0, 255]
B [0, 255]
A [0, 1]
H [0, 360)
S [0, 1]
L [0, 1]
调用方法
ReturnRGB('rgba(2,255,102,0.3)')
ReturnRGB('hsl(200,0.38,0.6)')
ReturnRGB('#F00')
* 使用请注明原作者
function ReturnRGB(color) {
var r = 0,
g = 0,
b = 0,
a = 1,
invalid = '非法参数',
lt = function(s, n) {
if (Number.isNaN(s) || s >= n) {
throw invalid;
}
return s;
},
lte = function(s, n) {
if (Number.isNaN(s) || s > n) {
throw invalid;
}
return s;
},
test = function(p, q, t) {
if (t < 0) {
t += 1;
} else if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
t = p + (q - p) * 6 * t;
} else if (t < 0.5) {
t = q;
} else if (t < 2 / 3) {
t = p + (q - p) * 6 * (2 / 3 - t);
} else {
t = p;
}
return t * 255;
},
hex = function(s) {
r = parseInt(s.substring(1, 3), 16);
g = parseInt(s.substring(3, 5), 16);
b = parseInt(s.substring(5, 7), 16);
},
rgba = function(part) {
r = lte(parseFloat(part[0]), 255);
g = lte(parseFloat(part[1]), 255);
b = lte(parseFloat(part[2]), 255);
a = lte(parseFloat(part[3]), 1);
},
hsla = function(part) {
var h = lt(parseFloat(part[0]), 360),
s = lte(parseFloat(part[1]), 1),
l = lte(parseFloat(part[2]), 1),
a = lte(parseFloat(part[3]), 1);
if (s == 0) {
r = g = b = l;
} else {
var q = l < 0.5 ? (l + l * s) : (l + s - l * s),
p = 2 * l - q;
k = h / 360;
r = test(p, q, k + 1 / 3);
g = test(p, q, k);
b = test(p, q, k - 1 / 3);
}
};
if (typeof color == 'string' && color.length > 3) {
color = color.replace(/\s+/g, '').toLowerCase();
if (/^#[0-9a-f]{3}$/.test(color)) {
hex(color.replace(/([0-9a-f])/g, '$1$1'));
} else if (/^#[0-9a-f]{6}$/.test(color)) {
hex(color);
} else if (/^rgba\([0-9,\.]+\)$/.test(color)) {
color = color.substring(5, color.length - 1);
color = color.split(',');
if (color.length == 4) {
rgba(color);
} else {
throw invalid;
}
} else if (/^rgb\([0-9,\.]+\)$/.test(color)) {
color = color.substring(4, color.length - 1);
color = color.split(',');
if (color.length == 3) {
color[3] = '1';
rgba(color);
} else {
throw invalid;
}
} else if (/^hsla\([0-9,\.]+\)$/.test(color)) {
color = color.substring(5, color.length - 1);
color = color.split(',');
if (color.length == 4) {
hsla(color);
} else {
throw invalid;
}
} else if (/^hsl\([0-9,\.]+\)$/.test(color)) {
color = color.substring(4, color.length - 1);
color = color.split(',');
if (color.length == 3) {
color[3] = '1';
hsla(color);
} else {
throw invalid;
}
} else {
throw invalid;
}
}
return {
Red: r,
Green: g,
Blue: b,
Alpha: a
}
}
这点不可能的, 谁知道你是漏了哪个参数! 参数需要严格对应!(请注意rgba和hsla都是有四个参数的)
以下是约定各变量的范围
R [0, 255]
G [0, 255]
B [0, 255]
A [0, 1]
H [0, 360)
S [0, 1]
L [0, 1]
调用方法
ReturnRGB('rgba(2,255,102,0.3)')
ReturnRGB('hsl(200,0.38,0.6)')
ReturnRGB('#F00')
* 使用请注明原作者
function ReturnRGB(color) {
var r = 0,
g = 0,
b = 0,
a = 1,
invalid = '非法参数',
lt = function(s, n) {
if (Number.isNaN(s) || s >= n) {
throw invalid;
}
return s;
},
lte = function(s, n) {
if (Number.isNaN(s) || s > n) {
throw invalid;
}
return s;
},
test = function(p, q, t) {
if (t < 0) {
t += 1;
} else if (t > 1) {
t -= 1;
}
if (t < 1 / 6) {
t = p + (q - p) * 6 * t;
} else if (t < 0.5) {
t = q;
} else if (t < 2 / 3) {
t = p + (q - p) * 6 * (2 / 3 - t);
} else {
t = p;
}
return t * 255;
},
hex = function(s) {
r = parseInt(s.substring(1, 3), 16);
g = parseInt(s.substring(3, 5), 16);
b = parseInt(s.substring(5, 7), 16);
},
rgba = function(part) {
r = lte(parseFloat(part[0]), 255);
g = lte(parseFloat(part[1]), 255);
b = lte(parseFloat(part[2]), 255);
a = lte(parseFloat(part[3]), 1);
},
hsla = function(part) {
var h = lt(parseFloat(part[0]), 360),
s = lte(parseFloat(part[1]), 1),
l = lte(parseFloat(part[2]), 1),
a = lte(parseFloat(part[3]), 1);
if (s == 0) {
r = g = b = l;
} else {
var q = l < 0.5 ? (l + l * s) : (l + s - l * s),
p = 2 * l - q;
k = h / 360;
r = test(p, q, k + 1 / 3);
g = test(p, q, k);
b = test(p, q, k - 1 / 3);
}
};
if (typeof color == 'string' && color.length > 3) {
color = color.replace(/\s+/g, '').toLowerCase();
if (/^#[0-9a-f]{3}$/.test(color)) {
hex(color.replace(/([0-9a-f])/g, '$1$1'));
} else if (/^#[0-9a-f]{6}$/.test(color)) {
hex(color);
} else if (/^rgba\([0-9,\.]+\)$/.test(color)) {
color = color.substring(5, color.length - 1);
color = color.split(',');
if (color.length == 4) {
rgba(color);
} else {
throw invalid;
}
} else if (/^rgb\([0-9,\.]+\)$/.test(color)) {
color = color.substring(4, color.length - 1);
color = color.split(',');
if (color.length == 3) {
color[3] = '1';
rgba(color);
} else {
throw invalid;
}
} else if (/^hsla\([0-9,\.]+\)$/.test(color)) {
color = color.substring(5, color.length - 1);
color = color.split(',');
if (color.length == 4) {
hsla(color);
} else {
throw invalid;
}
} else if (/^hsl\([0-9,\.]+\)$/.test(color)) {
color = color.substring(4, color.length - 1);
color = color.split(',');
if (color.length == 3) {
color[3] = '1';
hsla(color);
} else {
throw invalid;
}
} else {
throw invalid;
}
}
return {
Red: r,
Green: g,
Blue: b,
Alpha: a
}
}
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯