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 attachEvent和addEventListener使用方法
Mar 19 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
一种新的javascript对象创建方式Object.create()
Dec 28 Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 Javascript
javascript实现一个网页加载进度loading
Jan 04 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
canvas基础绘制-绚丽倒计时的实例
Sep 17 Javascript
vue element-ui table表格滚动加载方法
Mar 02 Javascript
webpack 样式加载的实现原理
Jun 12 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
ES10 特性的完整指南小结
Mar 04 Javascript
ES6的异步操作之promise用法和async函数的具体使用
Dec 06 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随机输出名人名言的代码
2012/10/07 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php采用curl模仿登录人人网发布动态的方法
2014/11/07 PHP
PHP实现批量修改文件后缀名的方法
2015/07/30 PHP
php头像上传预览实例代码
2017/05/02 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
Mootools 1.2教程 同时进行多个形变动画
2009/09/15 Javascript
js判断IE6/IE7/FF的代码[XMLHttpRequest]
2011/02/16 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
基于jQuery 实现bootstrapValidator下的全局验证
2015/12/07 Javascript
学习JavaScript设计模式之中介者模式
2016/01/14 Javascript
不能不知道的10个angularjs英文学习网站
2016/03/23 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
如何检测JavaScript的各种类型
2016/07/30 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
详谈js模块化规范
2017/07/07 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
vue一个页面实现音乐播放器的示例
2018/02/06 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
详解如何在微信小程序中愉快地使用sass
2018/07/30 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
2019/09/23 Javascript
vue中uni-app 实现小程序登录注册功能
2019/10/12 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
python修改操作系统时间的方法
2015/05/18 Python
详解Python nose单元测试框架的安装与使用
2017/12/20 Python
Python3爬虫之urllib携带cookie爬取网页的方法
2018/12/28 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
丑小鸭教学反思
2014/02/03 职场文书
个人原因辞职信模板
2015/05/13 职场文书
2016优秀护士先进个人事迹材料
2016/02/25 职场文书