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
javascript实现 color颜色格式转换【 rgb和十六进制的转换】的更多相关文章
- asp.net(c#) Color颜色的转换
1.在.net中如何把一个色名称转换成HTML色? System.Drawing.Color color = System.Drawing.Color.White; string s = string ...
- JavaScript随机生成颜色以及十六进制颜色 与RGB颜色值的相互转换
/** * 随机生成颜色 * @return 随机生成的十六进制颜色 */ function randomColor(){ var colorStr=Math.floor(Math.random()* ...
- 常用icon以及color颜色RGB值和对应颜色效果图
Android谷歌官方扁平化设计常用icon集合 Android谷歌官方扁平化设计color颜色RGB值和对应颜色效果图.
- ColorUtil【Color工具类(color整型、rgb数组、16进制互相转换)】
版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 主要用于color整型.rgb数组.16进制互相转换(-12590395 <--> #3FE2C5 <--> ...
- CSS1-CSS3 <color>颜色知识知多少?
非本人原创,原文转载自http://www.zhangxinxu.com/wordpress/2015/07/know-css1-css3-color/ by zhangxinxu from http ...
- Javascript 获取随机颜色的几种方式
先认识一下颜色值的表达方式 #FFFFFF,由6位16进制数组成.#FFFFFFFF,由8位16进制数组成,前6位表示颜色,后两位数表示透明度,数值越大,透明度越小.rgb(255,255,255), ...
- 前端需要了解的颜色模型,RGB、HSL和HSV
颜色模型,是用来表示颜色的数学模型.比如最常见的 RGB模型,使用 红绿蓝 三色来表示颜色. 一般的颜色模型,可以按照如下分类: 面向硬件设备的颜色模型:RGB,CMYK,YCrCb. 面向视觉感知的 ...
- Android color(颜色) 在XML文件和java代码中
Android color(颜色) 在XML文件和java代码中,有需要的朋友可以参考下. 1.使用Color类的常量,如: int color = Color.BLUE;//创建一个蓝色 是使用An ...
- 使用Javascript/jQuery将javascript对象转换为json格式数据 - 海涛的CSDN博客 - 博客频道 - CSDN.NET
body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
随机推荐
- iOS: 数据持久化方案
数据持久化方案(如果总结不到位,或者有误的地方,敬请斧正) 一.功能: 主要是将数据持久化到本地,减少对网络请求的次数,既节省了用户的流量,也增强了App的体验效果. 二.种类: plist存储:使 ...
- quartus II输入原理图及仿真步骤
在Quartus II中输入原理图以及实现仿真是学习基本数字电路的好方法.下面以一个基本的D锁存器为例,在quartus II 13.0中一步一步来实现原理图输入以及仿真过程. 1,创建工程 指定工程 ...
- [C#]手把手教你打造Socket的TCP通讯连接(一)
本文章将讲解基于TCP连接的Socket通讯,使用Socket异步功能,并且无粘包现象,通过事件驱动使用. 在编写Socket代码之前,我们得要定义一下Socket的基本功能. 作为一个TCP连接,不 ...
- GitHub超全机器学习工程师成长路线图,开源两日收获3700+Star!【转】
作者 | 琥珀 出品 | AI科技大本营(ID:rgznai100) 近日,一个在 GitHub 上开源即收获了 3700+ Star 的项目,引起了营长的注意.据介绍,该项目以 TensorFlow ...
- Swift 编程语言【转载+整理】
原文地址 在过去的几年中,移动应用程序风靡全世界并且已经改变了我们使用互联网进行工作或者休闲的方式.为了创建移动应用程序,各种技术应运而生,同时开发过程也开始将其作为一等公民来对待.尽管移动似乎已经无 ...
- Nginx的安装和设置
Nginx是一个高性能的HTTP服务器和反向代理服务器.当一个服务器访问量太大时(比如C10k问题,Concurrent 10,000 Connection),就可以安装设置一个Nginx服务器,将客 ...
- 迁移ORACLE_HOME引发的登录sqlplus无法加载类库错误
在10g以后,一般情况下环境变量中没有必要设置LD_LIBRARY_PATH,但是一旦将ORACLE_HOME迁移到其他目录,则环境变量中还需要添加这个变量. Linux和Unix支持TAR方式迁移O ...
- (原)Show, Attend and Translate: Unsupervised Image Translation with Self-Regularization and Attention
转载请注明出处: https://www.cnblogs.com/darkknightzh/p/9333844.html 论文网址:https://arxiv.org/abs/1806.06195 在 ...
- gdb 拾遗
1,跳过某个特定信号 (gdb) handle SIGPIPE nostop noprint pass 2,break在特定的系统调用处 (gdb) catch syscall 3 3,遇到一个断点的 ...
- Non-negative Matrix Factorization 非负矩阵分解
著名的科学杂志<Nature>于1999年刊登了两位科学家D.D.Lee和H.S.Seung对数学中非负矩阵研究的突出成果.该文提出了一种新的矩阵分解思想――非负矩阵分解(Non-nega ...