• javascript实现 color颜色格式转换【 rgb和十六进制的转换】


       以原型的方式,给string字符串类型添加方法,用于实现颜色值格式的转换;不习惯使用原型方法的,只要借鉴实现方法就好!

    代码如下:

    var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
    /*RGB颜色转换为16进制*/
    String.prototype.colorHex = function(){
         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;
         }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;
              }
         }else{
              return that;    
         }
    };
    
    //-------------------------------------------------
    
    /*16进制颜色转为RGB格式*/
    String.prototype.colorRgb = function(){
         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;    
         }
    };
    function (){
         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;    
         }
    }

     

    使用方法如下:

    "rgb(255,255,255)".colorHex();
    //输出: "#ffffff"
    
    "#ffffff".colorRgb();
    //输出:"RGB(255,255,255)"

     

      


    ------------------------------------------------

      博主经营一家发饰淘宝店,都是纯手工制作哦,开业冲钻,只为信誉!需要的亲们可以光顾一下!谢谢大家的支持!
    店名:
      小鱼尼莫手工饰品店
    经营:
      发饰、头花、发夹、耳环等(手工制作)
    网店:
      http://shop117066935.taobao.com/

      ---------------------------------------------------------------------

     

    转载请注明出处:http://www.cnblogs.com/qiongmiaoer/p/4566083.html

  • 相关阅读:
    五、生产者消费者模型_ThreadLocal
    四、多线程基础-线程池的创建和使用
    spring根据beanName获取bean
    spring容器的功能扩展
    机甲大师S1机器人编程学习,Windows 10 安装Scratch和简单实例学习
    如何建设高可用系统
    详解Condition的await和signal等待/通知机制
    从源码角度彻底理解ReentrantLock(重入锁)
    MySQL 分库分表及其平滑扩容方案
    机甲大师S1机器人编程学习
  • 原文地址:https://www.cnblogs.com/qiongmiaoer/p/4566083.html
Copyright © 2020-2023  润新知