• JS-011-颜色进制转换(RGB转16进制;16进制转RGB)


      在网页开发的时候,经常需要进行颜色设置,因而经常需要遇到进行颜色进制转换的问题,例如:RGB转16进制;16进制转RGB),前几天在测试的时候,发现网站的颜色进制转换某类16进制颜色(例如:#000080,#FA08FA)转换时总是提示颜色非法,看了一下 js 源码,发现其进制转换的方法是错误的。找了一下度娘和谷大爷,最终写了一个颜色转换的小方法,源码如下所示:

      

    String.prototype.colorHex2Rgb = function(){
        var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
        var sColor = this.toLowerCase();
    
        if(sColor && reg.test(sColor)){
            if(sColor.length === 4){
                var sColorNew = "#";
                
                for(var i=1; i<4; i+=1){
                    sColorNew += sColor.slice(i,i+1).concat(sColor.slice(i,i+1));    
                }
                
                sColor = sColorNew;
            }
            
            var sColorChange = [];
            
            for(var i=1; i<7; i+=2){
                sColorChange.push(parseInt("0x"+sColor.slice(i,i+2)));    
            }
            
            return "RGB(" + sColorChange.join(",") + ")";
        }else{
            return sColor;    
        }
    };
    
    String.prototype.colorRgb2Hex = function(){
        var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
        var that = this;
        
        if(/^(rgb|RGB)/.test(that)){
            var aColor = that.replace(/(?:(|)|rgb|RGB)*/g,"").split(",");
            var strHex = "#";
            
            for(var i=0; i<aColor.length; i++){
                var hex = Number(aColor[i]).toString(16);
            
                if(hex === "0"){
                    hex += hex;    
                }
                
                strHex += hex;
            }
            
            if(strHex.length !== 7){
                strHex = that;    
            }
            
            return strHex.toUpperCase();
        }else if(reg.test(that)){
            var aNum = that.replace(/#/,"").split("");
            
            if(aNum.length === 6){
                return that;    
            }else if(aNum.length === 3){
                var numHex = "#";
            
                for(var i=0; i<aNum.length; i+=1){
                    numHex += (aNum[i]+aNum[i]);
                }
                
                return numHex.toUpperCase();
            }
        }else{
            return that.toUpperCase();    
        }
    };

      使用示例:

    "#000080".colorHex2Rgb()     ----> RGB(0,0,128)
    "#FA0080".colorHex2Rgb()     ----> RGB(250,0,128)
    "#888".colorHex2Rgb()          ----> RGB(136,136,136)
    "#888888".colorHex2Rgb()     ----> RGB(136,136,136)
    
    
    "RGB(128,128,128)".colorRgb2Hex()   ---->  #808080
    "RGB(255,128,128)".colorRgb2Hex()   ---->  #FF8080
    "RGB(128,0,255)".colorRgb2Hex()       ---->  #8000FF

    至此, JS-011-颜色进制转换(RGB转16进制;16进制转RGB) 顺利完结,希望此文能够给初学 JavaScript 的您一份参考。

    最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^

  • 相关阅读:
    用欧拉公式推导三角函数所有公式包括 倍角公式-半角公式-和差化积-积化和差
    20161006-git学习笔记
    十五的学习日记20160925
    十五的学习日记20160926-你不知道的JS笔记/
    十五的学习日记20160927-ES6学习/中间变量/数组坑/
    十五的学习日记20160928-扑克牌/目标/Apache外网访问
    十五的学习日记20160929-click300毫秒延迟/requestAnimationFrame/帧率
    十五的学习日记20160930-jquery/ajax/JS引擎/job queue
    十五的学习日记20161001-insertAdjacentHTML与insertAdjacentText
    传入评分 返回整数和小数 页面拼接 --------------20160705
  • 原文地址:https://www.cnblogs.com/fengpingfan/p/5228830.html
Copyright © 2020-2023  润新知