js 实现颜色值格式转换 rgb和十六进制的转换
程序员文章站
2024-03-18 21:54:46
...
本文章是以prototype原型的方式,给string字符串类型添加方法,用于实现颜色值格式的转换。
如果你不用原型方法,那么你只要借鉴实现方法就好了。
RGB转换为16进制
String.prototype.colorHex = function () {
// RGB颜色值的正则
var reg = /^(rgb|RGB)/;
var color = this;
if (reg.test(color)) {
var strHex = "#";
// 把RGB的3个数值变成数组
var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
// 转成16进制
for (var i = 0; i < colorArr.length; i++) {
var hex = Number(colorArr[i]).toString(16);
if (hex === "0") {
hex += hex;
}
strHex += hex;
}
return strHex;
} else {
return String(color);
}
};
使用方法:
"rgb(255,255,255)".colorHex(); // #ffffff
16进制转换为RGB
String.prototype.colorRgb = function () {
// 16进制颜色值的正则
var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
var color = this.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值,需变成六位,如:#fff => #ffffff
if (color.length === 4) {
var colorNew = "#";
for (var i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值,转为RGB
var colorChange = [];
for (var i = 1; i < 7; i += 2) {
colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
}
return "RGB(" + colorChange.join(",") + ")";
} else {
return color;
}
};
使用方法:
"#fff".colorRgb(); // rgb(255,255,255)
"#ffffff".colorRgb(); // rgb(255,255,255)
上一篇: Beer Marathon(思维)
下一篇: jQuery(一)