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 相关文章推荐
最新的10款jQuery内容滑块插件分享
Sep 18 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
继续学习javascript闭包
Dec 03 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
Mar 28 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
Jun 15 Javascript
vue使用 better-scroll的参数和方法详解
Jan 25 Javascript
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
jquery动态添加带有样式的HTML标签元素方法
Feb 24 jQuery
vue-cli 打包使用history模式的后端配置实例
Sep 20 Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 Javascript
微信小程序实现拨打电话功能的示例代码
Jun 28 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 xml-rpc远程调用
2008/12/19 PHP
PHP里的中文变量说明
2011/07/23 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
分享PHP源码批量抓取远程网页图片并保存到本地的实现方法
2015/12/01 PHP
PHP MPDF中文乱码的解决方式
2015/12/08 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
onsubmit阻止form表单提交与onclick的相关操作
2010/09/03 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
2011/09/29 Javascript
JSONP获取Twitter和Facebook文章数的具体步骤
2014/02/24 Javascript
js带缩略图的图片轮播效果代码分享
2015/09/14 Javascript
jquery特效 点击展示与隐藏全文
2015/12/09 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
基于JS分页控件实现简单美观仿淘宝分页按钮效果
2016/11/07 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
浅谈angular2 组件的生命周期钩子
2017/08/12 Javascript
解决微信二次分享不显示摘要和图片的问题
2017/08/18 Javascript
JQuery判断正整数整理小结
2017/08/21 jQuery
vue实现全选和反选功能
2017/08/31 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
2019/04/15 Javascript
Python 3.x 新特性及10大变化
2015/06/12 Python
Python发送form-data请求及拼接form-data内容的方法
2016/03/05 Python
python+opencv实现阈值分割
2018/12/26 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
python正则表达式实例代码
2020/03/03 Python
python微信公众号开发简单流程实现
2020/03/09 Python
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
毕业班联欢会主持词
2014/03/27 职场文书
教师节宣传方案
2014/05/23 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
详解MySQL 联合查询优化机制
2021/05/10 MySQL
pytorch训练神经网络爆内存的解决方案
2021/05/22 Python
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫
漫画「狩龙人拉格纳」公开TV动画预告图
2022/03/22 日漫