以Javascript 将RGB 转换成HEX 色码

以Javascript 将RGB 转换成HEX 色码

近期学习前端开发(HTML、CSS、Javascript)，遇到这样的题目：

「请制作一个RGB 与HEX 色码的转换器，使用者输入RGB 色码，可以转换成十六进位的Hex 色码(限定6 位色码如#ff6600)。」

转换器有两种版本。基本版(下图上)：分别输入R、G、B 三种数字，范围0~255，按下Convert 按钮后转为HEX 码并显示颜色。挑战版(下图下)：拉动slider，会自动显示HEX 码并变换颜色。

先附上我的 Codepen： https://codepen.io/roan6903/pen/mdLELxV

我的写法并非标准答案 ， 也一定有更好的写法 ，本文仅说明我撰写时的想法。以下针对程式码重点部分解说。

基本版整体流程概述

要按下Convert 按钮后，才会有一切的后续动作。所以先于Convert 设置监听器，

Javascript 部份：设置转换成16 位元的函数

函数十六进制（数据）{
const rgbtransfer16 = Number(data).toString(16).toUpperCase();
如果（rgbtransfer16.length < 2）{
返回“0” + rgbtransfer16；
} 别的 {
返回 rgbtransfer16;
}
}

重点是toString(16) 这个程式码。一开始16进位的文章时，还以为是不是要另外写能够把10 进位调整成16 进位的函数，幸好只要一条程式码就能搞定！

基本版的 HTML 部份：input

255)value=255;if(value<0)value=0" id=”r_input” class=”input”>

位于Codepen 中HTML。因为RGB 码共有0~255 总共256 个数值， 使用oninput=”if(value>255)value=255;if(value<0)value=0" 让可输入的数值限制在0~255 而已。输入该范围以外的数字，例如-1 或256，就会被强制改为0 与255。

基本版的Javascript 部份：为按钮设置监听器

//为按钮(Convert)设置监听器，并设定按下后的动作
btn.addEventListener(“点击”, function () {
const r_line = document.querySelector(“#r_line”);
常量 g_line = document.querySelector(“#g_line”);
常量 b_line = document.querySelector(“#b_line”);
常量 r_input = document.querySelector(“#r_input”).value;
常量 g_input = document.querySelector(“#g_input”).value;
常量 b_input = document.querySelector(“#b_input”).value;

//左栏输入数字后出现颜色
如果（r_input.length > 0 && g_input.length > 0 && b_input.length > 0）{
r_line.children[1].style.backgroundColor = rgb(${r_input}, 0, 0);
g_line.children[1].style.backgroundColor = rgb(0, ${g_input}, 0);
b_line.children[1].style.backgroundColor = rgb(0, 0, ${b_input});

最当初想说要拆分成R、G、B 三行，输入完R 行、出现R 行颜色方块后，再输入G 与B 行并出现方块颜色，但这样会太繁复。后来所幸看到 这个作品 ，才惊觉怎么没想到可设定为：一次便让三行都输入数值，三个方块的颜色同时出现。

这一段的另一个关键是rgb() 程式码，R、G、B 三行各别抓取该行input 的数值、其余维持零即可，就能同时获得三个数值。

.value 与.valueAsNumber 的提醒

另外有大大特别提醒，toString()转换后的型别会是string。 .length 只能用于string，不能用于number。而这也牵扯到，上方的r_input、g_input、b_input使用.value 后型别为string，所以后来可加上r_input.lenth；但若是.valueAsNumber，资料型别为number，若加上r_input.lenth 则将发生错误。

挑战最难的部份？

一开始的HTML、CSS 都颇为顺利，反而是Javascript 设置监听器的时候最困难。另外value 与valueAsNumber 才发现有string 与number 资料型别的问题，如果没有人提醒的话，自己也不知道会有这种问题。题目分成基本版跟挑战版，但基本版从零打造架构最困难。我于基本版花了四天才写好，写完后挑战版一天就写好了。

测验是最直接的反馈

学习单向输入是一回事，真正遇到题型才能真正检视自己到底吸收、融会贯通了多少。本道题目一来测试自己了解多少，二来也在写程式的过程中重新整合理解程度，全部写完后有种拨云见日的畅快！

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38528/02532210