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 相关文章推荐
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
JS去除右边逗号的简单方法
Jul 03 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
node.js中的fs.truncate方法使用说明
Dec 15 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
javascript jquery对form元素的常见操作详解
Jun 12 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
Jul 22 Javascript
使用express搭建一个简单的查询服务器的方法
Feb 09 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 Javascript
linux服务器快速卸载安装node环境(简单上手)
Feb 22 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
PHP包含文件函数include、include_once、require、require_once区别总结
2014/04/05 PHP
php字符串的替换,分割和连接方法
2016/05/23 PHP
PHP识别二维码的方法(php-zbarcode安装与使用)
2016/07/07 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
PHP读取文件或采集时解决中文乱码
2021/03/09 PHP
form中限制文本字节数js代码
2007/06/10 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
EXT窗口Window及对话框MessageBox
2011/01/27 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
浅析webpack 如何优雅的使用tree-shaking(摇树优化)
2017/08/16 Javascript
浅谈Koa服务限流方法实践
2017/10/23 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
解决vue的变量在settimeout内部效果失效的问题
2018/08/30 Javascript
小程序实现五星点评效果
2018/11/03 Javascript
jquery实现二级导航下拉菜单效果实例
2019/05/14 jQuery
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
python中字符串比较使用is、==和cmp()总结
2018/03/18 Python
Python解析Excle文件中的数据方法
2018/10/23 Python
python自动打开浏览器下载zip并提取内容写入excel
2021/01/04 Python
python爬虫线程池案例详解(梨视频短视频爬取)
2021/02/20 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
英国最好的温室之家:Greenhouses Direct
2019/07/13 全球购物
如何处理简单的PHP错误
2015/10/14 面试题
2014乡镇干部纪律作风整顿思想汇报
2014/09/13 职场文书
西安大雁塔导游词
2015/02/10 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
React forwardRef的使用方法及注意点
2021/06/13 Javascript