首页 / JAVASCRIPT / Javascript实现Web颜色值转换

Javascript实现Web颜色值转换

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了Javascript实现Web颜色值转换，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5047字，纯文字阅读大概需要8分钟。

内容图文

最近一直忙碌于完成业务需求，好长时间没有写博客了。今天稍微有些时间，翻看了一下最近项目中的一些前端代码，看到Web颜色转换功能的时候，突然想到当我们在做一些颜色设置/编辑的需求时，经常会涉及到各种颜色值格式的互换。于是我决定记录一下我在做这一部分功能的时候是如何实现的，写下来和大家分享一下，希望读者们各抒己见，多多交流。

先看看问题

问题一，当我们在进行网页前端开发的时候，经常会使用 dom.style.backgroundColor = "#f00" 来设置某个 DOM 元素的背景颜色，也会通过类似（为什么是类似？情况比较多，这里可以自由发挥想象） var bgc = dom.style.backgroundColor 的代码来获取某个 DOM 元素的背景颜色。那么问题来了，请看下图：

Javascript实现Web颜色值转换 - 文章图片

如果这里的对比还不够明显，我们再继续往下看：

Javascript实现Web颜色值转换 - 文章图片

很显然，同一个颜色值，本来应该相等，但结果却并非如此。而这并非个例，笔者在Chrome开发工具和Firefox控制台，得到的结果是一致的。

问题二，前端开发工作，往往是从还原UI设计稿开始。而在编码过程中我们经常会发现这样的设计：某个盒子背景纯色（假设：#f00），但带有 75% 的不透明度。很显然，这种情况我们不能简单的通过 dom.style.backgroundColor = "#f00"来设置，因为达不到半透明的效果。话锋回转，我们知道 CSS3 里面出现了一个 rgba 的东西，也就是说我们可以通过 dom.style.backgroundColor = "rgba(255, 0, 0, 0.75)" 这样来设置带有半透明的背景颜色。那么，问题又来了：这一转换在Photoshop中很容易做到，但若在Javascript中，我们又该如何将(“#f00”, 75)转换成 rgba(255, 0, 0, 0.75) 呢？

接下来，我们一起来看看我是怎么做的。

rgb(a)颜色值转成十六进制颜色(hex)

都是做开发的，咱懂！说啥也不如直接上代码来得痛快，不过这里先放一段最原始的：

代码如下:
var rgbToHex = function(rgb) {
    var rRgb = /rgb$(\d{1,3}),(\d{1,3}),(\d{1,3})$/,
        rRgba = /rgba$(\d{1,3}),(\d{1,3}),(\d{1,3}),([.\d]+)$/,
        r, g, b, a, rs = rgb.replace(/\s+/g, "").match(rRgb),
        rsa = rgb.replace(/\s+/g, "").match(rRgba);
    if (rs) {
        r = (+rs[1]).toString(16);
        r = r.length == 1 ? "0" + r : r;
        g = (+rs[2]).toString(16);
        g = g.length == 1 ? "0" + g : g;
        b = (+rs[3]).toString(16);
        b = b.length == 1 ? "0" + b : b;
        return {hex: "#" + r + g + b, alpha: 100};
    } else if (rsa) {
        r = (+rsa[1]).toString(16);
        r = r.length == 1 ? "0" + r : r;
        g = (+rsa[2]).toString(16);
        g = g.length == 1 ? "0" + g : g;
        b = (+rsa[3]).toString(16);
        b = b.length == 1 ? "0" + b : b;
        a = (+rsa[4]) * 100
        return {hex: "#" + r + g + b, alpha: Math.ceil(a)};
    } else {
        return {hex: rgb, alpha: 100};
    }
};

为什么说是最原始的呢？因为在我今天review代码的时候，发现这里还有进化的空间，接下来对比一下进化（优化）后的代码：

代码如下:
var rgbToHex = function(rgb) {
        var rRgba = /rgba?$(\d{1,3}),(\d{1,3}),(\d{1,3})(,([.\d]+))?$/,
        r, g, b, a,
        rsa = rgb.replace(/\s+/g, "").match(rRgba);
    if (rsa) {
        r = (+rsa[1]).toString(16);
        r = r.length == 1 ? "0" + r : r;
        g = (+rsa[2]).toString(16);
        g = g.length == 1 ? "0" + g : g;
        b = (+rsa[3]).toString(16);
        b = b.length == 1 ? "0" + b : b;
        a = (+(rsa[5] ? rsa[5] : 1)) * 100
        return {hex: "#" + r + g + b, alpha: Math.ceil(a)};
    } else {
        return {hex: rgb, alpha: 100};
    }
};

且不说少了一个if分支，单从代码量上看，就很明显了吧！接下来，我们看看转换的结果是否如我们所愿的那样，为此我在控制台中执行了下图所示的几行代码：

Javascript实现Web颜色值转换 - 文章图片

从执行结果来看，我们的方法似乎已经能够达到我们的目的了。但是，细心的朋友应该注意到了图中有两个红色箭头，这里是不是有什么坑？不错。我们仔细看看第一个箭头中传入的颜色参数 rgb(255, 0, 0, 2)，其实这里并不是一个合法的颜色值，rgb格式的颜色值，是没有第四个（透明度）参数的；再看第二个箭头中 rgba(255, 0, 0, 1.48)，这里格式是没问题了，但是透明度却为1.48，其实不是一个合法的透明度值。这两种情况，我们的方法都正常执行了，也正常返回了，说明，我们的方法还有进一步进化的空间，就交给大家自行发挥了！

十六进制颜色(hex)转成rgba格式

在日常开发中，我们最常使用的颜色值应该就是十六进制格式的颜色值了（#ff0000、#f00等），如果我们在使用颜色值的时候需要转换成rgba格式，我们该怎么做呢？

代码如下:
var hexToRgba = function(hex, al) {
    var hexColor = /^#/.test(hex) ? hex.slice(1) : hex,
        alp = hex === 'transparent' ? 0 : Math.ceil(al),
        r, g, b;
    hexColor = /^[0-9a-f]{3}|[0-9a-f]{6}$/i.test(hexColor) ? hexColor : 'fffff';
    if (hexColor.length === 3) {
        hexColor = hexColor.replace(/(\w)(\w)(\w)/gi, '$1$1$2$2$3$3');
    }
    r = hexColor.slice(0, 2);
    g = hexColor.slice(2, 4);
    b = hexColor.slice(4, 6);
    r = parseInt(r, 16);
    g = parseInt(g, 16);
    b = parseInt(b, 16);
    return {
        hex: '#' + hexColor,
        alpha: alp,
        rgba: 'rgba(' + r + ', ' + g + ', ' + b + ', ' + (alp / 100).toFixed(2) + ')'
    };
};

同样，我们也写一写验证代码，来测试一下，我们的转换是否正常：

Javascript实现Web颜色值转换 - 文章图片

从执行结果来看，我们的方法，没有问题了，都能拿到我们想要的转换结果。但这里依然留给了大家两个红色箭头，非法的透明度和非法的颜色值。这部分进化功能也留给大家了，哈哈…

最后，网页颜色值之间的相互转换，其实是一个老生常谈的问题，我这里也只是简单的列出了一种，相信还有更多更好的方法可以使用，欢迎大家提出来，大家交流，共同进步~~

内容总结

以上是互联网集市为您收集整理的Javascript实现Web颜色值转换全部内容，希望文章能够帮你解决Javascript实现Web颜色值转换所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/359497.html

来源：【匿名】

【上一篇】javascript实现字符串反转的方法【下一篇】javascript 怎么调用php方法

更多 ►

【Javascript实现Web颜色值转换】教程文章相关的互联网学习教程文章

JavaScript 字符串转数字（整数，浮点数，进制转换）【代码】

下面是使用parseFloat()方法的示例： parseFloat("1234blue"); //returns 1234.0 parseFloat("0xA"); //returns NaN parseFloat("22.5"); //returns 22.5 parseFloat("22.34.5"); //returns 22.34 parseFloat("0908"); //returns 908 parseFloat("blue"); //returns NaNparseInt进行转换时，将字符串转成相应的整数。浮点数以后的数字都不要了。 parseInt("1234blue"); //returns 1234 parseInt("22.5"); //...

javascript之类型转换

JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是，如果某个类型的值用于需要其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。以下列出JavaScript一种特定类型用于一种特定环境下时所执行的转换。类型转换　值　　字符串　　　数字　　　布尔值　　　　　对象未定义　 "undefined" 　 NaN 　　　 false 　　　　　 Errornull 　 "nu...

JavaScript学习笔记（五）——类型、转换、相等、字符串【代码】

第六章类型相等转换等一、类型1 typeof();typeof是一个内置的JavaScript运算符，可用于探测其操作数的类型。例： 1 <script language="JavaScript" type="text/JavaScript">2 3var test1="abcdef"; //string 4 5var test2=123; //number 6 7var test3=true; //boolean 8 9var test4={...

JavaScript将输入的数字金额转换成对应的中文大写金额【代码】【图】

// 将输入的数字金额转换成对应的中文大写金额 // idNumber输入的数字金额，idCHN输出的中文大写金额function TransformNumberIntoCHN(idNumber, idCHN) {var number = document.getElementById(idNumber).value;if (!/^(0|[1-9]\d*)(\.\d{1,2})?$/.test(number)) {document.getElementById(idCHN).value = "";document.getElementById(idNumber).value = "";returnfalse;}var unit = "仟佰拾亿仟佰拾万仟佰拾元角分", str = "";nu...

Javascript类型转换的规则【图】

数据类型：原文：http://www.cnblogs.com/PowellZhao/p/5815738.html

javascript Date与string之间的转换

JavaScript 方法date to stringlet s = new Date().toLocaleString();console/log(s) ====string to datevar date = new Date("2018-9-21 14:58:43");//就是这么简单原文：https://www.cnblogs.com/javalinux/p/14592665.html

js 简繁转换【代码】【图】

js 简繁转换 1function copy(ob) {2var obj=findObj(ob); if (obj) {3 obj.select();js=obj.createTextRange();js.execCommand("Copy");}4 }5 6function paste(ob) {7var obj=findObj(ob); if (obj) {8 obj.select();js=obj.createTextRange();js.execCommand("Paste");}9 } 1011function cut(ob) { 12var obj=findObj(ob); if (obj) { 13 obj.select();js=obj.createTextRange();js.execCommand("...

黑马程序员_JavaScript变量转换和Jquery对象的转换

在实际编程过程中，有很多对字符串进行判断、拆分、比较、转换类型、校验等操作，下面我会总结下JavaScript变量转换和Jquery对象的转换。1.JavaScript 变量转换及字符串操作1.字符串变成int类型使用函数：parseInt();使用此函数，可将string类型变量转换为int类型。而且只能够对string类型变量使用。如果待转换string类型变量无发转换为int类型时，函数会返回NaN。实例如下：var v_Num = parseInt(‘256ok‘); // 赋值为 256var v_...

Javascript中的类型转换【代码】

第一部分：Javascript中类型转换的常用场景1.在使用运算符进行操作时，常用的运算符就是 + 运算符使用+运算符做运算时，由于只有字符串和数字才能够使用+运算符，那么使用时，会根据情况，将不同的数据类型，转换为字符串或者数字当+运算符左边的数据类型是数字时， 1 + null === 1 // 这里将null转为了数字0 1 + undefined // NaN undefined无法转为数字，那么就会 NaN 1 + NaN // NaN 注意的是 NaN === NaN 以及 NaN == ...

JavaScript数据容量单位转换（KB B MB GB....）【代码】

数据容量单位转换（KB B MB GB....）function bytesToSize(bytes) { if (bytes === 0) return '0 B'; var k = 1000, // or 1024 sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], i = Math.floor(Math.log(bytes) / Math.log(k)); return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]; }原文：http://blog.51cto.com/dd118/2136481

javascript数据类型判断及数据隐式和显示转换【代码】

数据类型判断数据类型有 number string boolean null undefined function object 这些，那如何去判断数据对应的是哪种类型呢typeof可以判断对应数据类型写法： typeof data 或者 typeof(data) ，一般习惯写后面这种返回值有 number string boolean object undefined function 这些代码如下：console.log(typeof(123)) //number console.log(typeof(‘true‘)) //string console.log(typeof(true)) //boolean console.log(...

细说JavaScript数据类型及转换【代码】

细说JavaScript数据类型及转换JavaScript数据类型 1.Boolean（布尔）布尔：（值类型）var b1=true;//布尔类型 2.Number（数字）数值：（值类型）var n1=3.1415926;//数值类型 n1.toFixed(3);//四舍五入保留3位小数。 3.String（字符串）var s1=‘hello‘;//字符串类型字符串：（值类型，字符串不可变特性） 4.Undefined（未定义） undefined属于值类型，与其他值计算得到的结果不是我们想要的，但与数据库中的null稍有区别，比如...

带你玩转JavaScript中的隐式强制类型转换【代码】

正题开始前我想先抛出一个问题，==和===有什么区别？可能一般人会想，不就是后者除了比较值相等之外还会比较类型是否相等嘛，有什么好问的，谁不知道？！但是这样说还不够准确，两者的真正区别其实是==在比较的时候允许做强制类型转换，而===不允许。好了终于引出了今天的重点，我们平时肯定遇到过强制类型转换的时候，死活想不通为什么要这样转换（为什么这两个相等）的情况。那么下面我就以==为例，来说明一下其中强制类型转换的...

Razor 将C#对象转换成Javascript对象， json还原被转码的字符 &quot·· HTML转义符【代码】

Razor 将C#对象转换成Javascript对象在Razor中使用Json字符串，特殊字符被自动转义（如：\"->"）@{var jsonStr = Html.Raw(JsonUtil.ToJson(VieBag.data)); } <script> var data = JSON.parse(@jsonStr); </script> ViewBag.Data = list;<script type="text/javascript">//将数据对象转换为 JSON 格式，是为了在网页中通过使用JS将数据作为文本进行处理var data = @Html.Raw(Json.Encode(ViewBag.Data));for (var i = 0; i < ...

javaScript转换日期合格式【代码】【图】

javascript如何将时间日期转换为Date对象:有时候需要讲一个字符串型的时间日期转换为Date时间对象，下面就通过一个简单的实例提供一种解决方案，当然也是一种思路，可以进行一定的变通，以达到举一反三的效果。例如这里有一个时间日期字符串:2013-9-15 8：25：30下面就将它们转换为时间对象。代码如下:var timeStr="2013-9-15 8:25:30"; var strArray=timeStr.split(" "); var strDate=strArray[0].split("-"); var strTime=strA...

首页 / JAVASCRIPT / Javascript实现Web颜色值转换

Javascript实现Web颜色值转换

内容导读

内容图文

内容总结

内容备注

内容手机端

【Javascript实现Web颜色值转换】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

WEB - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程