颜色转换器

颜色转换器

RGB颜色值和十六进制颜色码相互转换的主要代码:
    var sRGB = document.getElementById("rgb").value;
    var sixteen = document.getElementById("sixteen");
    var six = document.getElementById("sixteenInput").value;
    var rgbText = document.getElementById("rgbText");
    function rgb1hex(sRGB) {
        var reg = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;     //匹配类似rgb(123,020,244)格式
        var str = sRGB.match(reg);
        if (!str) {
            alert("输入格式有误")
        } else {
            var s = '#';
            for (var i = 1; i <= 3; i++) {
                var m = parseInt(str[i]);   //将rgb数值转换为整数
                if (0 <= m && m <= 255) {
                    s += m < 16 ? '0' + m.toString(16) : m.toString(16);
                } else {
                    alert("数字在0-255之间")
                }
            }
            console.log(s)
            sixteen.innerHTML = s;
            console.log("color:" + sixteen.style.color)
            return s;
        }
    }
    sixteen.style.color = rgb1hex(sRGB);

    function rgb2hex(six) {
        var reg = /^#([\da-f]{6}|[\da-f]{3})$/i
        var str = six.match(reg);
        console.log("str" + str)
        if (!str) {
            alert("输入格式不对,请输入如#37B400或者#fff")
        } else {
            var s = 'rgb';
            if (str[1].length == 6) {
                var m = parseInt(str[1][0] + str[1][1], 16)
                var n = parseInt(str[1][2] + str[1][3], 16)
                var f = parseInt(str[1][4] + str[1][5], 16)
            } else {
                var m = parseInt(str[1][0] + str[1][0], 16)
                var n = parseInt(str[1][1] + str[1][1], 16)
                var f = parseInt(str[1][2] + str[1][2], 16)
            }
            console.log(+m + "," + n + "," + f)
            if (0 <= m <= 255 && 0 <= n <= 255 && 0 <= f <= 255) {
                rgbText.innerHTML = s + "(" + m + "," + n + "," + f + ")";
                return s;
            }
            else {
                return six;
            }
        }
    }
    rgbText.style.color = six;
效果预览图:

目前只适用于火狐浏览器。

涉及到的知识点:

1.match()方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配,返回固定的值。

语法

stringObject.match(searchvalue)
stringObject.match(regexp)
searchvalue:必需。规定要检索的字符串值。
regexp:必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,
       则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象。

返回值

存放匹配结果的数组。该数组的内容依赖于 regexp 是否具有全局标志 g。

说明

match() 方法将检索字符串 stringObject,以找到一个或多个与 regexp 匹配的文本。这个方法的行为在很大程度上有赖于 regexp 是否具有标志 g。

如果 regexp 没有标志 g,那么 match() 方法就只能在 stringObject 中执行一次匹配。如果没有找到任何匹配的文本, match() 将返回 null。否则,它将返回一个数组,其中存放了与它找到的匹配文本有关的信息。该数组的第 0 个元素存放的是匹配文本,而其余的元素存放的是与正则表达式的子表达式匹配的文本。除了这些常规的数组元素之外,返回的数组还含有两个对象属性。index 属性声明的是匹配文本的起始字符在 stringObject 中的位置,input 属性声明的是对 stringObject 的引用。

如果 regexp 具有标志 g,则 match() 方法将执行全局检索,找到 stringObject 中的所有匹配子字符串。若没有找到任何匹配的子串,则返回 null。如果找到了一个或多个匹配子串,则返回一个数组。不过全局匹配返回的数组的内容与前者大不相同,它的数组元素中存放的是 stringObject 中所有的匹配子串,而且也没有 index 属性或 input 属性。

注意:在全局检索模式下,match() 即不提供与子表达式匹配的文本的信息,也不声明每个匹配子串的位置。如果您需要这些全局检索的信息,可以使用 RegExp.exec()。

2.parseInt() 函数可解析一个字符串,并返回一个整数。

语法

parseInt(string, radix)  
string:必需,被解析的字符串;radix:可选,表示要解析的数字的基数。该值介于 2 ~ 36 之间。

返回值

返回解析后的数字。

说明

当参数 radix 的值为 0,或没有设置该参数时,parseInt() 会根据 string 来判断数字的基数。

举例,如果 string 以 “0x” 开头,parseInt() 会把 string 的其余部分解析为十六进制的整数。如果 string 以 0 开头,那么 ECMAScript v3 允许 parseInt() 的一个实现把其后的字符解析为八进制或十六进制的数字。如果 string 以 1 ~ 9 的数字开头,parseInt() 将把它解析为十进制的整数。

参考文档:
http://www.w3school.com.cn/jsref/jsref_match.asp
http://www.w3school.com.cn/jsref/jsref_parseInt.asp

 

 




So BadJust So SoGoodCoolPretty Cool (2 人已评分, 平均分: 5.00 )
Loading...

发表评论

电子邮件地址不会被公开。 必填项已用*标注