【99JS】之三：颜色转换器

作者：99 日期：2012-11-24 点击：617

css3一个重要的部分就是引入了多种颜色格式。各种颜色的使用在透明度/css3渐变等应用非常广泛。(css3背景渐变的讲解可见) 但是我们写样式的时候常常被颜色的写法弄晕。

今天就教大家实现一个简单的颜色转换器。

关于css3颜色的详细介绍可以点击这里，也可以看看本站的玩转CSS3的颜色

目标：实现一个颜色转换器，支持rgba颜色，hex颜色与滤镜颜色互相转变。

思路：

我们首先要明确转换的规则。

rgb与hex的一个简单对照：

关键字      hex颜色      rgb
yellow      #FFFF00      255 255 0
white       #FFFFFF      255 255 255
red         #FF0000      255 0 0

更加详细的英文颜色对照表请参考网页颜色英文代码全集,大家可以看到rgb颜色其实是r g b 三个部分组成的。

其实是hex颜色 每两位分组，之后从16进制转为十进制即可。

同样，我如果知道rgb颜色，想把它转为hex，只需要把r,g,b三个部分分别转为十六进制即可。rgba的a主要是操纵的透明度。范围从0-1. 而ms渐变滤镜支持单一颜色。也支持透明度，他的形式是这样的

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000')

其中StartColorStr 和 EndColorStr颜色组成:

# + 透明度 + hex颜色。透明度是通过下列公式计算出来的：

算法: Math.floor(opacity(0-1)* 255).toString(16);

举个例子。我们想得到透明度30%的背景色#000000。则用Math.floor(0.3* 255).toString(16)=4c 之后拼起来：

#4c000000
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#4c000000', EndColorStr='#4c000000')

关于ie滤镜的详细用法参考Gradient Filter

实现方法

可以看出上述思路的核心是“进制转换”，而进制转换在javascript中我们可以利用toString方法。

方法:Number.toString()

将数字转换为字符串。用它的参数指定的基数或底数（底数范围为2-36）。如果省略参数，则使用基数10。当参数值为2时，返回二进制数。

var a = 34;
document.write(a.toString() + "<br />");
document.write(a.toString(2) + "<br />");
document.write(a.toString(8) + "<br />");
document.write(a.toString(16) + "<br />");

补充toString相关(javascript中，toString方法是每个对象都有的方法，并且是一个非常强大的方法。他的使用范围也很广 。方法的基本用法：JavaScript toString() 方法、JavaScript函数补完：toString()而实际应用的时候，javascript内部很多方法都会调用对象自身的toString方法。

  1. 如 alert() toString()，一个会自动调用的方法
  2. 如 加运算（javascript高级程序设计第二版 p42加性操作符之加法）
  3. 减运算（注意区别）（javascript高级程序设计第二版 p43加性操作符之减法）
  4. 一元加减操作符(注意与+号的区别)（javascript高级程序设计第二版 p31-p33 操作符部分第一节）

而对象自身的toString方法可以被重写。另外呢，覆盖对象的toString方法不会被for in遍历出来，这个感兴趣的可以自己了解。各浏览器中用 for in 可以遍历对象中被更新的内置方法存在差异

注意toString还有一点，数字的字面值（literal）不是对象

2.toString(); // 出错：SyntaxError

解决方法：

2..toString(); // 第二个点号可以正常解析
2 .toString(); // 注意点号前面的空格
(2).toString(); // 2先被计算

扯了这么多，我们来讲讲写法：首先呢，接收用户的参数。这个参数可能是hex颜色(#fff,#ffffff)之类,可能是rgba颜色 (rgba()),那么首先我们就要去分出三种情况。仍然可以利用正则表达式来判断。

  1. 可以利用/r/.test(val) 判断是否含有"r" 这样就可以判断用户输入是rgba颜色。
  2. 可以利用/#/.test(val) 判断是否含有“#”(hex颜色）
  3. 之后可以用 val.match(/\d+/g)，他的意思是，匹配一个或者多个数字。

那比如'rgba(255,255,255)'.match(/\d+/g),结果就是:["255", "255", "255"]，利用数组下标就可以方便的进行处理。上代码吧~

/**这个函数主要是把rgb颜色转为hex颜色**/
function toHex(r, g, b) {
  Pr = r.toString(16).length == 1 ? (0 + r.toString(16)) : r.toString(16)
  Pg = g.toString(16).length == 1 ? (0 + g.toString(16)) : g.toString(16)
  Pb = b.toString(16).length == 1 ? (0 + b.toString(16)) : b.toString(16)
  return Pr + Pg + Pb
}
/**这个函数是主要入口**/
var parseColor = function (val, op) {//接收两个参数：颜色值跟透明度
var r,
    g,
    b,
    op = op || 1,
    hex,
    filter;//我们利用var 多个变量名逗号的方式定义多个变量
// 默认rgb
if (/r/.test(val)) {//抽出rgb
var arr = val.match(/\d+/g);
r = parseInt(arr[0]);
g = parseInt(arr[1]);
b = parseInt(arr[2]);
op = op;
hex = '#' + toHex(r, g, b);//转到hex方法，拿到hex颜色。
filter = '#' + Math.floor(op * 255).toString(16) + toHex(r, g, b);
}
// 进制转换
else if (/#/.test(val)) {
hex = val
var len = val.length;
// #ffffff
if (len === 7) {//输入的是七位#ffffff 那么利用slice方法，每两位分组。去掉前面的#
  r = parseInt(val.slice(1, 3), 16);
  g = parseInt(val.slice(3, 5), 16);
  b = parseInt(val.slice(5), 16);
  op = op;
  filter = '#' + Math.floor(op * 255).toString(16) + toHex(r, g, b);
}
// #fff
else if (len === 4) {//输入的是四位#fff 那么利用charAt方法，每一位分组，补全成两位，去掉前面的#
  r = parseInt(val.charAt(1) + val.charAt(1), 16);
  g = parseInt(val.charAt(2) + val.charAt(2), 16);
  b = parseInt(val.charAt(3) + val.charAt(3), 16);
  op = op;
  filter = '#' + Math.floor(op * 255).toString(16) + toHex(r, g, b);
}
 } else {//容错
  alert('颜色格式不正确,请重新输入');
}
return {//这里我们的结果返回了一个对象。可以利用对象+属性名即可取到
  'r' : r,
  'g' : g,
  'b' : b,
  'op' : op,
  'hex' : hex,
  'filter' : filter
}
};
//console.log(parseColor('#ffffff',1))
//console.log(parseColor('#fff',0.5))
//console.log(parseColor('#000000',0.3))
//console.log(parseColor('rgb(122,34,214)',0.2))

以上函数有个很重要的就是结果返回的是一个对象是键值对的形式。我们取对象值的时候，既可以利用 a.r属性来取，也可以利用a['r']属性来取，注意a['r']的引号！另外这里我们用var定义了一个函数，这叫做函数表达式。以后的文章会讲解到。

如需转载，烦请注明出处：http://www.w3cplus.com/js/99js-color-converter.html

返回顶部