• 十六进制颜色值和rgb颜色值互相转换


      在之前的一篇文章《将16进制的颜色转为rgb颜色》中,曾经写过将16进制的颜色转换为rgb颜色。

      当然了,今天再看,还是有很多可以优化的地方,所以对之前的代码重构了一遍,并且同时写了一个反向转换(也就是将rgb颜色值转换为字符串形式的16进制的颜色值)函数。

      16进制转换rgb:

        function transferColorToRgb(color) {
                if (typeof color !== 'string' && !(color instanceof String)) return console.error("请输入16进制字符串形式的颜色值");
                color = color.charAt(0) === '#' ? color.substring(1) : color;
                if (color.length !== 6 && color.length !== 3) return console.error("请输入正确的颜色值")
                if (color.length === 3) {
                    color = color.replace(/(w)(w)(w)/, '$1$1$2$2$3$3')
                }
                var reg = /w{2}/g;
                var colors = color.match(reg);
                for (var i = 0; i < colors.length; i++) {
                    colors[i] = parseInt(colors[i], 16).toString();
                }
                return 'rgb(' + colors.join() + ')';
            }
    

      调用时,参数形式可以为带“#”号,也可以不带,实际颜色值可以为3位,也可以为6位,如: "#ffffff"、"#fff"、"ffffff"、"fff"。

      其中涉及到了利用正则表达式对3位16进制的颜色值转换为6位的数值。

    color.replace(/(w)(w)(w)/, '$1$1$2$2$3$3')
    

      rgb颜色值转为为16进制的颜色值:

        function transferRgbToStr(color) {
                if (typeof color !== 'string' && !(color instanceof String) || !~color.indexOf('rgb')) return console.error("请输入rgb形式的颜色值");
                color = color.replace(/s+/g, '');
                var index = color.indexOf('(') + 1;
                //注意: String 的slice方法,slice方法参数为负数时,即为倒数
                // substring 方法参数为负数时,全都认为是0
                var colors = color.slice(index, -1).split(',').slice(0, 3);
                for (var i = 0; i < colors.length; i++) {
                    if (parseInt(colors[i], 10) > 255 || parseInt(colors[i], 10) < 0)
                        return console.error("颜色值范围在0到255之间,请注意输入值!")
                    colors[i] = parseInt(colors[i], 10).toString(16);
                    if (colors[i].length === 1) {
                        colors[i] = "0" + colors[i]
                    }
                }
                return colors.join("");
            }
    

      调用时,参数形式可以为带“rgb()”形式的,也可以为"rgba()"形式的数据,如: rgb(122,23,1) 、rgba(123,23,12,0.5)。

      需要注意的是:

    var colors = color.slice(index, -1).split(',').slice(0, 3);
    

      这一句代码当中,有两个slice方法,一个是字符串方法,一个是数组方法,尽管他们的用法一样,仍然需要谨慎。

      还涉及到了String方法中的substring和slice方法使用上的区别,主要是参数为负数时,两者不同的处理方式。slice当做倒数,也就是从后往前数,而sunstring则完全认作是0。请在不同的场景下正确使用两个方法。  

      

  • 相关阅读:
    Retrieve Excel Workbook Sheet Names
    总股本和流通股本
    Net序列化与数据压缩类
    HTTP Compression 速用方法
    市净率
    兼容FF,IE,Chrome的js离开或刷新页面检测
    【转】不能执行已释放的Script 代码
    三款在线css3样式生成工具
    不固定个数的子元素自适应居中
    收集几个浏览器好用插件工具
  • 原文地址:https://www.cnblogs.com/zhuhuoxingguang/p/10254218.html
Copyright © 2020-2023  润新知