在网页开发的时候,经常需要进行颜色设置,因而经常需要遇到进行颜色进制转换的问题,例如:RGB转16进制;16进制转RGB),前几天在测试的时候,发现网站的颜色进制转换某类16进制颜色(例如:#000080,#FA08FA)转换时总是提示颜色非法,看了一下 js 源码,发现其进制转换的方法是错误的。找了一下度娘和谷大爷,最终写了一个颜色转换的小方法,源码如下所示:

  

String.prototype.colorHex2Rgb = function(){
var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
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;
}
}; String.prototype.colorRgb2Hex = function(){
var reg = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
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[i]).toString(16); if(hex === "0"){
hex += hex;
} strHex += hex;
} if(strHex.length !== 7){
strHex = that;
} return strHex.toUpperCase();
}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[i]+aNum[i]);
} return numHex.toUpperCase();
}
}else{
return that.toUpperCase();
}
};

  使用示例:

"#000080".colorHex2Rgb()     ----> RGB(0,0,128)
"#FA0080".colorHex2Rgb() ----> RGB(250,0,128)
"#888".colorHex2Rgb() ----> RGB(136,136,136)
"#888888".colorHex2Rgb() ----> RGB(136,136,136) "RGB(128,128,128)".colorRgb2Hex() ----> #808080
"RGB(255,128,128)".colorRgb2Hex() ----> #FF8080
"RGB(128,0,255)".colorRgb2Hex() ----> #8000FF

至此, JS-011-颜色进制转换(RGB转16进制;16进制转RGB) 顺利完结,希望此文能够给初学 JavaScript 的您一份参考。

最后,非常感谢亲的驻足,希望此文能对亲有所帮助。热烈欢迎亲一起探讨,共同进步。非常感谢! ^_^

JS-011-颜色进制转换(RGB转16进制;16进制转RGB)的更多相关文章

  1. PHP进制转换[实现2、8、16、36、64进制至10进制相互转换]

    自己写了一个PHP进制转换程序,一个类吧,第一次写这个东东,写这个东东,在处理文本文件时能用得到.   可以实现: 10进制转换2.8.16.36.62进制2.8.16.36.62进制转换10进制 有 ...

  2. C# 进制转换 在什么情况下使用16进制,字节数组,字符串

    C# 进制转换 Admin2013年9月18日 名人名言:从工作里爱了生命,就是通彻了生命最深的秘密.——纪伯伦 1.请问c#中如何将十进制数的字符串转化成十六进制数的字符串 //十进制转二进制Con ...

  3. 【进制转换】codevs 1474 十进制转m进制

    #include<cstdio> using namespace std; ],en; int main() { scanf("%d%d",&n,&m) ...

  4. JS 进制转换的理解

    该事情的由来是来自于一个面试题,题目是这样的,[1,2,3].map(parseInt)的结果是什么? 作为菜鸟的我们一定是觉得分别把1,2,3分别交给parseInt,无非就是1,2,3嘛.其实结果 ...

  5. Java的进制转换操作(十进制、十六进制、二进制)

    2014-05-06 17:34 吴文付 最近由于工作上的需要,遇到进制转换的问题.涉及到的进制主要是 十进制,十六进制,二进制中间的转换. 这里整理一下.具体的计划为:封装一个转换类,一个测试类. ...

  6. java:数据结构(二)栈的应用(进制转换全收集)

    说到进制转换,java已经封装了基本的方法,在竞赛中使用封装的方法自然能节省大量时间 另一位仁兄介绍的封装好的方法: https://blog.csdn.net/m0_37961948/article ...

  7. 华为笔试——C++进制转换

    题目:2-62进制转换 题目介绍:输入一个n1 进制的整数(包括负数),将其转换成n2 进制,其中n1 .n2 的范围是 [ 2,62 ] .每个数字的范围是0-9.a-z.A-Z.不用考虑非法输入. ...

  8. Java 基础入门随笔(2) JavaSE版——关键字、进制转换、类型转换

    1.Java语言-关键字 关键字:被java语言赋予了特殊含义的词,特点是所有的字母都为小写. java涉及到的关键字整理: 用于定义数据类型的关键字 class interface byte sho ...

  9. 写一个比较全的进制转换函数--ic

    //写一个比较全的进制转换函数-----未完成 #include <stdio.h> //D进制转换后 (比如10-2进制) 结果可能会很大 需要很长的字符串来存 #include < ...

  10. Python(3) 进制转换

    2进制 :0b8进制: 0o16进制: 0x10进制:原来的数据 进制转换:bin() 方法:转化为 2进制 >>> bin(10)'0b1010'oct() 方法:转化为 8进制& ...

随机推荐

  1. POJ 1845 (约数和+二分等比数列求和)

    题目链接: http://poj.org/problem?id=1845 题目大意:A^B的所有约数和,mod 9901. 解题思路: ①整数唯一分解定理: 一个整数A一定能被分成:A=(P1^K1) ...

  2. Set集合对象比较两个元素的方法

    Set集合对象比较两个元素的方法并不是根据“equals()”方法的返回值来比较.而是用“hashCode()”方法来进行判断.只要两个元素的“hashCode()”方法的返回值相同,就认为两个元素相 ...

  3. 优先使用最新版本的IE 和 Chrome 内核 1 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    兼容模式 优先使用最新版本的IE 和 Chrome 内核 1 <meta http-equiv="X-UA-Compatible" content="IE=edge ...

  4. ACM 奋斗的小蜗牛

    奋斗的小蜗牛 时间限制:1000 ms  |  内存限制:65535 KB 难度:1   描述 传说中能站在金字塔顶的只有两种动物,一种是鹰,一种是蜗牛.一只小蜗牛听了这个传说后,大受鼓舞,立志要爬上 ...

  5. 手机web站点和手机app 技术选型的困惑于思考

    今年一直在关注移动端技术的发展,自己也用博客园的rss接口玩了半年,关于技术选型的困惑和大家说说 一 趋势 随着手机硬件不断的升级,外加4g牌照的发放,不出2年时间移动端web站点和手机app一定会进 ...

  6. 【BZOJ】1105: [POI2007]石头花园SKA

    题意 二维平面上有\(n(2 \le n \le 1000000)\)个点,可以花费\(w_i\)交换第\(i\)个点的横纵坐标.求在满足能覆盖所有点的最小矩阵周长最短的情况下花费最小. 分析 这题太 ...

  7. 基于FSIOT_A 实验平台SAM3S4B cortex-M3的温湿度采集

    作者:卢老师,华清远见嵌入式学院讲师. DHT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器.它应用专用的数字模块采集技术和温湿度传感器技术,确保产品具有极高的可靠性与卓越的长期稳 ...

  8. JavaScript事件对象【转】

    一. 事件对象 事件处理三部分组成:对象.事件处理函数=函数.例如:单击文档任意处. 1.鼠标按钮 非 IE(W3C)中的 button 属性 0 表示主鼠标按钮(常规一般是鼠标左键) 1 表示中间的 ...

  9. *HDU3496 背包DP

    Watch The Movie Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65535/65535 K (Java/Others)T ...

  10. hdu Sudoku Killer

    简单的dfs,主要就是每个?处填的值是否满足条件的判断.这道题感觉考察的是输出格式的控制. #include"iostream" #include"stdio.h&quo ...