私は最近ビジネスニーズの完了に忙しく、長い間ブログを書いていません。今日は少し時間がかかり、最近のプロジェクトのフロントエンドコードのいくつかを見ました。 Webカラー変換機能を見たとき、私は突然、いくつかの色設定/編集要件を実行しているときに、多くの場合、さまざまな色の値形式の交換が含まれることが多いと思いました。そこで、私はこの関数のこの部分をどのように実装し、それを書き留めてあなたと共有し、読者が自分の意見を表明し、より多くのコミュニケーションをすることを願っています。
最初に問題を見てください
質問1。フロントエンドのWebページを開発する場合、dom.style.backgroundcolor = "＃f00"を使用して、DOM要素の背景色を設定することがよくあります。また、コードを類似しています（なぜ同じことがありますか？多くの場合、ここで想像力を自由に使用できます）var bgc = dom.style.backgroundcolorは、DOM要素の背景色を取得します。質問は、下の写真を参照してください。
ここでの比較が十分に明らかでない場合は、さらに見てみましょう。
明らかに、同じ色の値は等しくなければなりませんが、結果はそうではありません。これは孤立したケースではありません。 Chrome開発ツールとFirefoxコンソールで得られる結果は同じです。
質問2：フロントエンドの開発は、UIデザインドラフトの復元から始まることがよくあります。エンコーディングプロセス中に、そのようなデザインがよくあります：ボックスの背景固体色（想定：＃f00）ですが、75％の不透明度です。明らかに、半透明効果を達成できないため、dom.style.backgroundcolor = "＃f00"を使用してこの状況を単純に設定することはできません。振り向くと、CSS3にRGBAのものがあることがわかっています。つまり、dom.style.backgroundcolor = "rgba（255、0、0、0.75）"をdom.style.backgroundcolor = "を介して半透明の背景色を設定できます。次に、問題は再びです。この変換はPhotoshopで簡単に行うことができますが、JavaScriptにいる場合、どのように（ "＃f00"、75）をRGBA（255、0、0、0.75）に変換する必要がありますか？
次に、私がそれをどのように行うか見てみましょう。
RGB（a）六角カラーに変換された色の値（16進体）
それらはすべて開発のためです、私たちは理解しています！コードを直接アップロードすることをお勧めしますが、元のコードの一部は次のとおりです。
<！ - lang：js->
コードコピーは次のとおりです。
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）};
} それ以外 {
return {hex：rgb、alpha：100};
}
};
なぜそれが最も原始的なのですか？今日コードを確認すると、ここに進化の余地がまだあることがわかったからです。進化した（最適化された）コードを比較しましょう。
<！ - lang：js->
コードコピーは次のとおりです。
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）};
} それ以外 {
return {hex：rgb、alpha：100};
}
};
言うまでもなく、ブランチが欠落している場合、コードボリュームだけでは明らかです！次に、コンバージョンの結果が私たちが望む通りかどうかを見てみましょう。このために、コンソールの次の図に示されているコードの数行を実行しました。
実行結果から判断すると、私たちの方法は目標を達成したようです。ただし、慎重な友人は、写真に2つの赤い矢があることに気付くはずです。ここに落とし穴はありますか？良い。最初の矢印で渡された色パラメーターRGB（255、0、0、2）を詳しく見てみましょう。実際、これは合法的な色の価値ではありません。 RGB形式の色値には、4番目の（透明性）パラメーターがありません。次に、2番目の矢印で2番目の矢印RGBA（255、0、0、1.48）を見てください。ここではフォーマットに問題はありませんが、透明性は1.48であり、実際には法的透明性の価値ではありません。私たちの方法は正常に実行され、正常に返されており、私たちの方法にはまださらに進化する余地があることを示しているため、パフォーマンスのためにすべての人に任せます！
ヘックス色（六角）をRGBA形式に変換します
毎日の開発では、最もよく使用する色の値は、16進形式（＃ff0000、＃f00など）の色値でなければなりません。色の値を使用するときにRGBA形式に変換する必要がある場合、どうすればよいですか？
<！ - lang：js->
コードコピーは次のとおりです。
var hextorgba = function（hex、al）{
var hexcolor = /^#/.test(hex）？ hex.slice（1）：hex、
alp = hex === '透明'？ 0：math.ceil（al）、
R、G、B;
hexcolor = /^ [0-9a-f] {3 }| [0-9a-f] {6 }$/i.test(hexcolor）？ hexcolor： 'ffffff';
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）;
戻る {
ヘックス： '＃' + hexcolor、
アルファ：ALP、
rgba： 'rgba（' + r + '、' + g + '、' + b + '、' +（alp / 100）.tofixed（2） + '）'
};
};
同様に、コンバージョンが正常かどうかをテストするための検証コードも書きます。
実行結果から判断すると、私たちの方法には問題がなく、必要な変換結果を得ることができます。しかし、ここでは、違法な透明性と違法な色の値の2つの赤い矢印を残しています。進化機能のこの部分は、すべての人にも残されています、ハハ...
最後に、Webページの色の値間の相互変換は実際には決まり文句の問題です。それらの1つをここにリストしました。より良い方法があると思います。誰もがそれを提案したり、コミュニケーションをとったり、一緒に進歩を遂げたりすることができます~~