简单的做一个颜色进制转换

最新推荐文章于 2024-05-26 11:26:33 发布

会做饭的技术男

最新推荐文章于 2024-05-26 11:26:33 发布

阅读量265

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=hjhihkkhjbcb&title=%E7%AE%80%E5%8D%95%E7%9A%84%E5%81%9A%E4%B8%80%E4%B8%AA%E9%A2%9C%E8%89%B2%E8%BF%9B%E5%88%B6%E8%BD%AC%E6%8D%A2

版权

前端专栏收录该内容

2507 篇文章 13 订阅

订阅专栏

以蓝色为例，#0000FF应该被表示成rgb(0,0,255)。

我们将函数命名为getRGB()

（可以将字符串视为数组，这个数组的元素为字符）

function getRGB(color) {
  var rgb = [parseInt('0x'+color.slice(1,3)),parseInt('0x'+color.slice(3,5)),parseInt('0x'+color.slice(5,7))];
  return "rgb(" + rgb[0] + ","  + rgb[1] + "," +rgb[2] +")" ;       
}

在控制台中，我们发现：当我们缩写16进制颜色的时候，就会出现NaN；

（这个例子我练习了之前学到的数组的slice方法）

我们可以试试这样

        var getRGB = function(oRgb) {
            var color = [],
                rgb   = [];
            oRgb = oRgb.replace(/#/, "");
            if (oRgb.length == 3) {
                var tmp = [];
                for (var i = 0; i < 3; i++) {
                    tmp.push(oRgb.charAt(i) + oRgb.charAt(i));
                }
                oRgb = tmp.join("");
            }
            for (var i = 0; i < 3; i++) {
                color[i] = "0x" + oRgb.substr(i + 2, 2);
                rgb.push(parseInt(Number(color[i])));
            }
            return "rgb(" + 　rgb.join(",") + ")";
        }