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 相关文章推荐
(currentStyle)javascript为何有时用style得不到已设定的CSS的属性
Aug 15 Javascript
javascript日期转换 时间戳转日期格式
Nov 05 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
jquery ajax跨域解决方法(json方式)
Feb 04 Javascript
javascript包装对象实例分析
Mar 27 Javascript
js事件驱动机制 浏览器兼容处理方法
Jul 23 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
yarn的使用与升级Node.js的方法详解
Jun 04 Javascript
JS编写兼容IE6,7,8浏览器无缝自动轮播
Oct 12 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法
Jun 04 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 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
用PHP读取IMAP邮件
2006/10/09 PHP
php中出现空白页的原因及解决方法汇总
2014/07/08 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
双击滚屏-常用推荐
2006/11/29 Javascript
Javascript日期对象的dateAdd与dateDiff方法
2008/11/18 Javascript
锋利的jQuery 要点归纳(二) jQuery中的DOM操作(下)
2010/03/23 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
js实现的四级左侧网站分类菜单实例
2015/05/06 Javascript
JavaScript统计网站访问次数的实现代码
2015/11/18 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
nodejs个人博客开发第四步 数据模型
2017/04/12 NodeJs
js实现双色球效果
2020/08/02 Javascript
[04:54]DOTA2 2017国际邀请赛:上届冠军WINGS采访短片
2017/08/09 DOTA
python中的多线程实例教程
2014/08/27 Python
在Python中使用HTML模版的教程
2015/04/29 Python
python中argparse模块用法实例详解
2015/06/03 Python
python实现LBP方法提取图像纹理特征实现分类的步骤
2019/07/11 Python
使用Windows批处理和WMI设置Python的环境变量方法
2019/08/14 Python
Python打包工具PyInstaller的安装与pycharm配置支持PyInstaller详细方法
2020/02/27 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
用python写PDF转换器的实现
2020/10/29 Python
python 使用tkinter+you-get实现视频下载器
2020/11/17 Python
CSS3 仿微信聊天小气泡实例代码
2017/04/05 HTML / CSS
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
全球最大的房车租赁市场:Outdoorsy
2018/09/19 全球购物
美国快时尚彩妆品牌:Winky Lux(透明花瓣润唇膏)
2018/11/06 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
都柏林通行卡/城市通票:The Dublin Pass
2020/02/16 全球购物
青春演讲稿范文
2014/05/08 职场文书
营业员岗位职责
2015/02/11 职场文书
2015年招生工作总结
2015/05/04 职场文书
大学生违纪检讨书范文
2015/05/07 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书