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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM