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 相关文章推荐
javascript相等运算符与等同运算符详细介绍
Nov 09 Javascript
js实现弹窗插件功能实例代码分享
Dec 12 Javascript
php中给js数组赋值方法
Mar 10 Javascript
JavaScript将数组转换成CSV格式的方法
Mar 19 Javascript
javascript跨域原因以及解决方案分享
Apr 08 Javascript
jQuery数据检索中根据关键字快速定位GridView指定行的实现方法
Jun 08 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
Sep 14 Javascript
iview实现select tree树形下拉框的示例代码
Dec 21 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
基于Vue el-autocomplete 实现类似百度搜索框功能
Oct 25 Javascript
交互式可视化js库gojs使用介绍及技巧
Feb 18 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP stream_context_create()作用和用法分析
2011/03/29 PHP
PHP+Ajax异步通讯实现用户名邮箱验证是否已注册( 2种方法实现)
2011/12/28 PHP
Yii 快速,安全,专业的PHP框架
2014/09/03 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
php微信开发之图片回复功能
2018/06/14 PHP
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
PHP防止sql注入小技巧之sql预处理原理与实现方法分析
2019/12/13 PHP
JS中创建函数的三种方式及区别
2016/03/13 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
基于JavaScript实现新增内容滚动播放效果附完整代码
2017/08/24 Javascript
jquery鼠标悬停导航下划线滑出效果
2017/09/29 jQuery
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
2018/08/30 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
深入理解Angularjs 脏值检测
2018/10/12 Javascript
[01:51]2014DOTA2西雅图邀请赛 MVP 外卡赛black场间采访
2014/07/09 DOTA
[00:44]2016完美“圣”典 风云人物:Mikasa宣传片
2016/12/07 DOTA
删除目录下相同文件的python代码(逐级优化)
2012/05/25 Python
python中__call__内置函数用法实例
2015/06/04 Python
在PyCharm环境中使用Jupyter Notebook的两种方法总结
2018/05/24 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
python温度转换华氏温度实现代码
2020/12/06 Python
Pandas对每个分组应用apply函数的实现
2020/12/13 Python
CSS3实现内凹圆角的实例代码
2017/05/04 HTML / CSS
CSS3 清除浮动的方法示例
2018/06/01 HTML / CSS
质量承诺书范文
2014/03/27 职场文书
廉政承诺书
2015/01/19 职场文书
指导老师鉴定意见
2015/06/05 职场文书
如何利用Python实现一个论文降重工具
2021/07/09 Python
python 管理系统实现mysql交互的示例代码
2021/12/06 Python