数码资讯
Web颜色转换的javaｓｃｒｉｐｔ实现
最近我们一直忙着做业务需求，好久没有写博客了。今天我有点时间看一下近期项目中的一些前端代码。当我看到网页色彩转换功能，我突然想到，当我们在做一些颜色设置/编辑的需要，我们经常涉及到各种不同的颜色值的格式交换。所以我决定记录我所做的这部分的功能是如何实现的，写下来与大家分享，希望读者可以交换每个人各抒
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
最近我们一直忙着做业务需求，好久没有写博客了。今天我有点时间看一下近期项目中的一些前端代码。当我看到网页色彩转换功能，我突然想到，当我们在做一些颜色设置/编辑的需要，我们经常涉及到各种不同的颜色值的格式交换。所以我决定记录我所做的这部分的功能是如何实现的，写下来与大家分享，希望读者可以交换每个人各抒己见。
先看问题
问题是，当我们开发Web前端，我们经常使用dom.style.backgroundcolor =# F00来设置一个DOM元素的背景颜色，它也会通过类似的（为什么是相似的情况太多，在这里可以自由的想象）VAR BGC = dom.style.backgroundcolor代码来获得一定的DOM元素的背景颜色。那么问题来了，请看下面的图片。
如果反差不够明显，我们将继续往下看。
很明显，相同的颜色值应该是相等的，但结果不是这样的，这不是一个例子，其结果与Chrome开发工具和Firefox控制台一致。
问题二，前端开发工作往往是从UI设计开始减少。在编码过程中，我们经常会发现这样的设计：一盒一个纯色背景（假设：# F00），但75%不透明。显然，这种状况不能简单地设置的dom.style.backgroundcolor =# F00因为它不实现半透明效果。旋转中心，我们知道CSS3有RGBA的事情，也就是说我们可以通过dom.style.backgroundcolor = RGBA（255, 0, 0，0.75）建立一个透明的背景色。那么问题又来了：这种转变是很容易的在PS图象处理软件，但是在Javaｓｃｒｉｐｔ中，我们如何变换（# F00，75）为RGBA（255, 0, 0，0.75）
接下来，让我们看看我是怎么做的。
RGB（a）颜色值变成十六波段颜色（十六进制）。
一切都做完了，我知道！比直接代码更好，但这里是最原始的代码：
复制代码代码如下所示：
无功rgbtohex =功能（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，）。比赛（RRGB），
RSA = rgb.replace（ / / S + G，）的比赛（rrgba）；
如果（RS）{
R =（+ RS { 1 }），ToString（16）；
R = r.length = = 0 1＋R R；
G =（+ RS { 2 }），ToString（16）；
G = g.length = = 0 1 + G G；
B =（+ RS { 3 }），ToString（16）；
B = b.length = = 0 1＋B：B；
返回{六：# + R+G+B，α：100 }；
}如果（RSA）{
R =（+ RSA { 1 }），ToString（16）；
R = r.length = = 0 1＋R R；
G =（+ RSA { 2 }），ToString（16）；
G = g.length = = 0 1 + G G；
B =（+ RSA { 3 }），ToString（16）；
B = b.length = = 0 1＋B：B；
a =（+ RSA { 4 }）* 100
返回{六：# + R+G+B，α：Math.ceil（一）}；
{人}
返回{十六进制：RGB，alpha：100 }；
}
}；
为什么它是最原始的因为在我今天的回顾代码中，我发现这里有一个进化的空间，然后比较进化后的代码（优化）。
复制代码代码如下所示：
无功rgbtohex =功能（RGB）{
无功rrgba = / RGBA （（ D { 1,3 }）、（ D { 1,3 }）、（ D { }（1,3），（{。 D} +）））/，
R，G，B，A，
RSA = rgb.replace（ / / S + G，）的比赛（rrgba）；
如果（RSA）{
R =（+ RSA { 1 }），ToString（16）；
R = r.length = = 0 1＋R R；
G =（+ RSA { 2 }），ToString（16）；
G = g.length = = 0 1 + G G；
B =（+ RSA { 3 }），ToString（16）；
B = b.length = = 0 1＋B：B；
a =（+（RSA { 5 } RSA { 5 }：1））* 100
返回{六：# + R+G+B，α：Math.ceil（一）}；
{人}
返回{十六进制：RGB，alpha：100 }；
}
}；
而且不要说一个if分支，从代码的数量来看，这是非常明显的！接下来，让我们看看转换的结果是否符合我们的意愿，所以我在控制台中执行了如下几行代码。
从实现的结果来看，我们的方法似乎能够实现我们的目标。然而，细心的朋友应该注意到图片中有两个红色箭头。这里有坑吗很好u3002we看RGB颜色参数为第一个箭头（255, 0, 0小心，2），但没有一个有效的颜色值，颜色值RGB格式，没有第四（透明度）参数；看看RGBA二箭在（255, 0, 0，1.48），其中格式是没有问题的，但透明度为1.48，事实上，没有一个合法的透明度值。在这两种情况下，我们的方法已经被正常执行，并已恢复正常。这表明我们的方法有进一步发展的空间，所以我们可以自己玩。
十六位小数（HEX）颜色转换为RGBA格式
在日常的开发，最常用的颜色值应该是十六的二进制格式的颜色值（# FF0000，#菌等）。如果我们需要变换RGBA格式时，我们使用的颜色值，我们该怎么办
复制代码代码如下所示：
无功hextorgba =功能（六角、Al）{
无功hexcolor = / / ^ #。试验（HEX）hex.slice（1）：六，
ALP =进制= 'transparent 0：Math.ceil（Al），
R，G，B；
hexcolor = / ^ { 0-9a-f } { 3 } | { 0-9a-f } { 6 } $ / i.test（hexcolor）hexcolor：fffff；
如果（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）；
返回{
巫术：# + hexcolor，
阿尔法：碱性磷酸酶，
Rgba：'rgba（+ R +，+ g + '，' + B +，+（ALP / 100）。ToFixed（2）+）'
}；
}；
同样，我们也编写一个验证代码来测试转换是否正常。
从实现的结果来看，我们的方法没有问题，可以得到我们想要的转换结果，但是它仍然留下两个红色箭头，非法透明和非法颜色值，这部分进化函数也留给大家，哈哈…
最后，网页颜色值之间的转换实际上是一个普遍的问题。我只是列出其中之一。我相信有更多更好的方法来使用它。欢迎大家提出，大家交流，共同进步。
先看问题
问题是，当我们开发Web前端，我们经常使用dom.style.backgroundcolor =# F00来设置一个DOM元素的背景颜色，它也会通过类似的（为什么是相似的情况太多，在这里可以自由的想象）VAR BGC = dom.style.backgroundcolor代码来获得一定的DOM元素的背景颜色。那么问题来了，请看下面的图片。
如果反差不够明显，我们将继续往下看。
很明显，相同的颜色值应该是相等的，但结果不是这样的，这不是一个例子，其结果与Chrome开发工具和Firefox控制台一致。
问题二，前端开发工作往往是从UI设计开始减少。在编码过程中，我们经常会发现这样的设计：一盒一个纯色背景（假设：# F00），但75%不透明。显然，这种状况不能简单地设置的dom.style.backgroundcolor =# F00因为它不实现半透明效果。旋转中心，我们知道CSS3有RGBA的事情，也就是说我们可以通过dom.style.backgroundcolor = RGBA（255, 0, 0，0.75）建立一个透明的背景色。那么问题又来了：这种转变是很容易的在PS图象处理软件，但是在Javaｓｃｒｉｐｔ中，我们如何变换（# F00，75）为RGBA（255, 0, 0，0.75）
接下来，让我们看看我是怎么做的。
RGB（a）颜色值变成十六波段颜色（十六进制）。
一切都做完了，我知道！比直接代码更好，但这里是最原始的代码：
复制代码代码如下所示：
无功rgbtohex =功能（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，）。比赛（RRGB），
RSA = rgb.replace（ / / S + G，）的比赛（rrgba）；
如果（RS）{
R =（+ RS { 1 }），ToString（16）；
R = r.length = = 0 1＋R R；
G =（+ RS { 2 }），ToString（16）；
G = g.length = = 0 1 + G G；
B =（+ RS { 3 }），ToString（16）；
B = b.length = = 0 1＋B：B；
返回{六：# + R+G+B，α：100 }；
}如果（RSA）{
R =（+ RSA { 1 }），ToString（16）；
R = r.length = = 0 1＋R R；
G =（+ RSA { 2 }），ToString（16）；
G = g.length = = 0 1 + G G；
B =（+ RSA { 3 }），ToString（16）；
B = b.length = = 0 1＋B：B；
a =（+ RSA { 4 }）* 100
返回{六：# + R+G+B，α：Math.ceil（一）}；
{人}
返回{十六进制：RGB，alpha：100 }；
}
}；
为什么它是最原始的因为在我今天的回顾代码中，我发现这里有一个进化的空间，然后比较进化后的代码（优化）。
复制代码代码如下所示：
无功rgbtohex =功能（RGB）{
无功rrgba = / RGBA （（ D { 1,3 }）、（ D { 1,3 }）、（ D { }（1,3），（{。 D} +）））/，
R，G，B，A，
RSA = rgb.replace（ / / S + G，）的比赛（rrgba）；
如果（RSA）{
R =（+ RSA { 1 }），ToString（16）；
R = r.length = = 0 1＋R R；
G =（+ RSA { 2 }），ToString（16）；
G = g.length = = 0 1 + G G；
B =（+ RSA { 3 }），ToString（16）；
B = b.length = = 0 1＋B：B；
a =（+（RSA { 5 } RSA { 5 }：1））* 100
返回{六：# + R+G+B，α：Math.ceil（一）}；
{人}
返回{十六进制：RGB，alpha：100 }；
}
}；
而且不要说一个if分支，从代码的数量来看，这是非常明显的！接下来，让我们看看转换的结果是否符合我们的意愿，所以我在控制台中执行了如下几行代码。
从实现的结果来看，我们的方法似乎能够实现我们的目标。然而，细心的朋友应该注意到图片中有两个红色箭头。这里有坑吗很好u3002we看RGB颜色参数为第一个箭头（255, 0, 0小心，2），但没有一个有效的颜色值，颜色值RGB格式，没有第四（透明度）参数；看看RGBA二箭在（255, 0, 0，1.48），其中格式是没有问题的，但透明度为1.48，事实上，没有一个合法的透明度值。在这两种情况下，我们的方法已经被正常执行，并已恢复正常。这表明我们的方法有进一步发展的空间，所以我们可以自己玩。
十六位小数（HEX）颜色转换为RGBA格式
在日常的开发，最常用的颜色值应该是十六的二进制格式的颜色值（# FF0000，#菌等）。如果我们需要变换RGBA格式时，我们使用的颜色值，我们该怎么办
复制代码代码如下所示：
无功hextorgba =功能（六角、Al）{
无功hexcolor = / / ^ #。试验（HEX）hex.slice（1）：六，
ALP =进制= 'transparent 0：Math.ceil（Al），
R，G，B；
hexcolor = / ^ { 0-9a-f } { 3 } | { 0-9a-f } { 6 } $ / i.test（hexcolor）hexcolor：fffff；
如果（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）；
返回{
巫术：# + hexcolor，
阿尔法：碱性磷酸酶，
Rgba：'rgba（+ R +，+ g + '，' + B +，+（ALP / 100）。ToFixed（2）+）'
}；
}；
同样，我们也编写一个验证代码来测试转换是否正常。
从实现的结果来看，我们的方法没有问题，可以得到我们想要的转换结果，但是它仍然留下两个红色箭头，非法透明和非法颜色值，这部分进化函数也留给大家，哈哈…
最后，网页颜色值之间的转换实际上是一个普遍的问题。我只是列出其中之一。我相信有更多更好的方法来使用它。欢迎大家提出，大家交流，共同进步。
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。