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& ...
随机推荐
- 第十五章 dubbo结果缓存机制
dubbo提供了三种结果缓存机制: lru:基于最近最少使用原则删除多余缓存,保持最热的数据被缓存 threadlocal:当前线程缓存 jcache:可以桥接各种缓存实现 一.使用方式 <du ...
- [Python设计模式] 第7章 找人帮忙追美眉——代理模式
github地址:https://github.com/cheesezh/python_design_patterns 题目1 Boy追求Girl,给Girl送鲜花,送巧克力,送洋娃娃. class ...
- swagger搭建(基于springBoot)详解
前后端分离后,api接口文档的维护就成了一个让人头疼的问题,api接口更新慢,或因开发工作量大,没时间整理文档,导致前后端分离后前端同学和后端同 学都纠结于文档的问题.而swagger的出现,不亚于一 ...
- elasticsearch日志删除命令
通过curl发送DELETE命令给elasticsearch服务器,进行日志删除操作.命令示例如下: curl -XDELETE *' curl -XDELETE 'http://192.168.10 ...
- 检查死锁与Locked ownable synchronizers(转载)
通过jstack可快速检查线程的死锁信息,用法如下: # 获取JVM ID(JAVA 进程ID),通过参数lv可以获取更详细的JAVA方法调用信息 jps -lv # 得到JVM ID后,执行jsta ...
- [转]MyEclipse内存不足问题
1.修改eclipse.ini 在Myeclipse安装目录下G:\MyEclipse8.5\Genuitec\MyEclipse 8.5有一个myeclipse.ini配置文件,设置如下: -vma ...
- sonarqube 自动代码审查
1.docker 拉取sonarqube docker pull sonarqube 2.启动docker docker run -d --name sonarqube -p 9000:9000 so ...
- 译:9.使用Redis进行消息传递
本指南引导您完成使用Spring Data Redis发布和订阅通过Redis发送的消息的过程.Messaging with Redis 1. 我们将构建什么? 您将构建一个使用StringRedis ...
- 记一次性能优化,限制tcp_timewait数量,快速回收和重用
前言 这篇文章的主题是记录一次Python程序的性能优化,在优化的过程中遇到的问题,以及如何去解决的.为大家提供一个优化的思路,首先要声明的一点是,我的方式不是唯一的,大家在性能优化之路上遇到的问题都 ...
- 未能加载文件或程序集"CheckRegister"或它的某一个依赖项.参数错误. (异常来
报“未能加载文件或程序集“CheckRegister”或它的某一个依赖项.参数错误”的解决方法 问题如下所示: 未能加载文件或程序集“CheckRegister”或它的某一个依赖项.参数错误. (异常 ...