javascript实现十六进制颜色值(HEX)和RGB格式相互转换


Posted in Javascript onJune 20, 2014

在日常开发中,经常会用到不同格式的颜色域值之间的相互转换,以下给出一种解决方法。

//十六进制颜色值的正则表达式

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).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+aNum);

            }

            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;        

    }};

使用颜色转换方法:
ar sRgb = "RGB(23, 245, 56)" , sHex = "#34538b";

var sHexColor = sRgb.colorHex();

var sRgbColor = sHex.colorRgb();
Javascript 相关文章推荐
showModelessDialog()使用详解
Sep 21 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
jquery中$(#form :input)与$(#form input)的区别
Aug 18 Javascript
JS实现模拟百度搜索“2012世界末日”网页地震撕裂效果代码
Oct 31 Javascript
AngularJS操作键值对象类似java的hashmap(填坑小结)
Nov 12 Javascript
Vue.js展示AJAX数据简单示例讲解
Mar 29 Javascript
Validform验证时可以为空否则按照指定格式验证
Oct 20 Javascript
Angular2+如何去除url中的#号详解
Dec 20 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
JavaScript实现前端网页版倒计时
Mar 24 Javascript
一篇文章学会Vue中间件管道
Jun 20 Vue.js
js常用数组操作方法简明总结
Jun 20 #Javascript
JS实现闪动的title消息提醒效果
Jun 20 #Javascript
jquery操作checked属性以及disabled属性的多种方法
Jun 20 #Javascript
jquery弹窗插件colorbox绑定动态生成元素的方法
Jun 20 #Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 #Javascript
jquery获取html元素的绝对位置和相对位置的方法
Jun 20 #Javascript
confirm的用法示例用于按钮操作时确定是否执行
Jun 19 #Javascript
You might like
第十四节 命名空间 [14]
2006/10/09 PHP
php中使用sftp教程
2015/03/30 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
可在线编辑网页文字效果代码(单击)
2013/03/02 Javascript
js仿百度贴吧验证码特效实例代码
2014/01/16 Javascript
jquery遍历checkbox的注意事项说明
2014/02/21 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
基于javascript实现的搜索时自动提示功能
2014/12/26 Javascript
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
JS实现的跨浏览器解析XML文件实例
2016/06/21 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
浅谈Express异步进化史
2017/09/09 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
vue+Element-ui实现分页效果实例代码详解
2018/12/10 Javascript
用Golang运行JavaScript的实现示例
2019/11/25 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
vue3.0 上手体验
2020/09/21 Javascript
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
在CentOS6上安装Python2.7的解决方法
2018/01/09 Python
使用Python爬了4400条淘宝商品数据,竟发现了这些“潜规则”
2018/03/23 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
Django 接收Post请求数据,并保存到数据库的实现方法
2019/07/12 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
jupyter notebook中新建cell的方法与快捷键操作
2020/04/22 Python
PyTorch之nn.ReLU与F.ReLU的区别介绍
2020/06/27 Python
Pandas的数据过滤实现
2021/01/15 Python
SneakerStudio英国:最佳运动鞋商店
2019/05/22 全球购物
商务会议邀请函
2014/01/09 职场文书
财务人员求职自荐书范文
2014/02/10 职场文书
干部下基层实施方案
2014/03/14 职场文书
承租经营合作者协议书
2014/10/01 职场文书
5种方法告诉你如何使JavaScript 代码库更干净
2021/09/15 Javascript
MySQL学习之基础命令实操总结
2022/03/19 MySQL