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 相关文章推荐
Dreamweaver jQuery智能提示插件,支持版本提示,支持1.6api
Jul 31 Javascript
javascript类型转换使用方法
Feb 08 Javascript
js实现类似MSN提示的页面效果代码分享
Aug 24 Javascript
js window对象属性和方法相关资料整理
Nov 11 Javascript
javascript创建对象、对象继承的实用方式详解
Mar 08 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
jQuery 常用代码集锦(必看篇)
May 16 Javascript
jQuery实现别踩白块儿网页版小游戏
Jan 18 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
May 04 jQuery
深入理解Angular4中的依赖注入
Jun 07 Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 Javascript
vue 根据选择条件显示指定参数的例子
Nov 09 Javascript
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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
提升PHP执行速度全攻略(上)
2006/10/09 PHP
PHP版网站缓存加快打开速度的方法分享
2012/06/03 PHP
探讨:web上存漏洞及原理分析、防范方法
2013/06/29 PHP
thinkphp ajaxfileupload实现异步上传图片的示例
2017/08/28 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
分享一个用Mootools写的鼠标滑过进度条改变进度值的实现代码
2011/12/12 Javascript
E3 tree 1.6在Firefox下显示问题的修复方法
2013/01/30 Javascript
基于javascipt-dom编程 table对象的使用
2013/04/22 Javascript
node.js中的fs.lchown方法使用说明
2014/12/16 Javascript
使用js获取伪元素的content实例
2017/10/24 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
vue-router权限控制(简单方式)
2018/10/29 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
[51:00]Secret vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
python网络编程学习笔记(一)
2014/06/09 Python
django2 快速安装指南分享
2018/01/05 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
Python使用Excel将数据写入多个sheet
2020/05/16 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
村官学习十八大感想
2014/01/15 职场文书
会议活动邀请函
2014/01/27 职场文书
幼儿园小班评语
2014/04/18 职场文书
明星邀请函
2015/02/02 职场文书
六年级语文教学反思
2016/03/03 职场文书
技术入股协议书
2016/03/22 职场文书