javascript中的十六进制到rgb转换器答案

【问题标题】：Hex to rgb converter in javascriptjavascript中的十六进制到rgb转换器
【发布时间】：2021-11-09 23:27:01
【问题描述】：

我正在尝试制作一个简单的 rgb 到 hex 转换器，但我一直卡在 Javascript 上，我做错了什么？在 html 部分，我制作了一个表单，在提交时调用 convert() 函数。

function convert() {
    r = parseInt(document.getElementById('r').value);
    g = parseInt(document.getElementById('g').value);
    b = parseInt(document.getElementById('b').value);

    rgb(r, g, b);
    function rgb(r, g, b){
        res = ColorToHex(r) + ColorToHex(g) + ColorToHex(b);
        function ColorToHex(color) {
            if (color > 255) return "FF";
            else if (color < 0) return "00";
            else color.toString(16).padStart(2, "0").toUpperCase();
          }
    }
    document.getElementById('result').innerHTML = res;    
    return false;
}

【问题讨论】：

什么是ColorToHex？
看看这个，它可能会有所帮助：stackoverflow.com/questions/21646738/convert-hex-to-rgba

标签： javascript html hex rgb

【解决方案1】：

这会从 RGB 中返回十六进制

console.log(convert('255','18', '50'));

function convert(r, g, b) {
    r = parseInt(r); g = parseInt(g); b = parseInt(b);
    res = r.toString(16) + g.toString(16) + b.toString(16);
    res = res.toUpperCase();
    return res;
}

【讨论】：

【解决方案2】：

首先，请正确声明您的变量。我不知道您在其余代码中还做了什么，这可能是也可能不是一个因素。

其次，我不知道您在 HTML 中做了什么。从显示的代码中，我假设您的 HTML 具有以下内容：

<input id="r" type="number"/>
<input id="g" type="number"/>
<input id="b" type="number"/>

和

<span id="result">This Space For Lease</span>

虽然我收集到您在<form> 中包含了一些带有提交按钮的内容，但这并不是绝对必要的。例如，您可以使用onBlur 之类的东西来调用convert()，每次您为更动态的用户体验进行任何输入更改时。此外，使用' onclick="select()" `，这样当您单击输入时，它会自动选择现有内容。

以下示例中的 cmets 中提到的其他优化。

<body>
    <h3>Enter integer RGB values</h3>
    <input id="r" type="number" onclick="select()" onblur="convert()" value="00" style="width: 5em; background:#fcc;" />
    <input id="g" type="number" onclick="select()" onblur="convert()" value="00" style="width: 5em; background:#cfc;" />
    <input id="b" type="number" onclick="select()" onblur="convert()" value="00" style="width: 5em; background:#ccf;" />
    <br>
    <h3>Result as a HEX string</h3>
    <div style="margin:1em 0.5em; padding: 0.5em 0;">THE COLOR IS:
        <span id="colorPatch" style="margin: 0.5em; padding: 1em; background-color: black; border-radius: 0.6em;"> &nbsp;&nbsp;&nbsp; </span><br>
        <span id="result">#000000</span>
    </div> 
</body>

<script>
        // create variables for all "getElement..." this was the DOM
        // only needs to be parsed on page load, so future access to
        // the elements is via the variable instead for better performance.
    let inputR = document.getElementById('r'),
        inputG = document.getElementById('g'),
        inputB = document.getElementById('b'),
        resultOut = document.getElementById('result'),
        colorOut = document.getElementById('colorPatch');

function convert() {
            // here making the assumption that the expected inputs are
            // unsigned integers, we clamp the values to 0-255, then
            // make each into a 2 char hex str with padding.
        let hexR = Math.min(Math.max(inputR.value, 0), 255).toString(16).padStart(2, "0"),
            hexG = Math.min(Math.max(inputG.value, 0), 255).toString(16).padStart(2, "0"),
            hexB = Math.min(Math.max(inputB.value, 0), 255).toString(16).padStart(2, "0");
            
            // concatenate to a hex color string
        let resultColor = "#" + hexR + hexG + hexB; 
        
            // Send to output and set color of sample color patch.
            // toUpperCase() is performed once on the final string,
            // instead of the substrings
        resultOut.innerHTML = 
        colorOut.style.backgroundColor = resultColor.toUpperCase(); 
    }
</script>

并且还在下面添加了它作为sn-p。请务必阅读代码 cmets，因为它们会解释事物的现状和原因。

现在，对于串联，它可能会更紧密：

function convert() {
  colorOut.style.backgroundColor =
  resultOut.innerHTML = ("#"
      + Math.min(Math.max(inputR.value,0),255).toString(16).padStart(2,"0")
      + Math.min(Math.max(inputG.value,0),255).toString(16).padStart(2,"0")
      + Math.min(Math.max(inputB.value,0),255).toString(16).padStart(2,"0")).toUpperCase();
}

所有内容都在一个逻辑行上（添加换行符只是为了便于阅读），因此无需声明和分配更多变量。虽然这种事情如果走得太远会影响代码的可读性。

在制作大字符串时，我喜欢将连接运算符 (+) 放在每行的开头，这与我通过将数学运算符放在每行的末尾来分解长方程的方式相反。这清楚地表明 + 用于连接而不是添加。

如果有任何问题，请告诉我...

     // create variables for all "getElement..." this was the DOM
    // only needs to be parsed on page load, so future access to
   // the elements is via the variable instead for better 
    let inputR = document.getElementById('r'),
          inputG = document.getElementById('g'),
        inputB = document.getElementById('b'),
        resultOut = document.getElementById('result'),
        colorOut = document.getElementById('colorPatch');

function convert() {
             // here making the assumption that the expected inputs are
      // unsigned integers, we clamp the values to 0-255, then
     // make each into a 2 char hex str with padding.
        let hexR = Math.min(Math.max(inputR.value, 0), 255).toString(16).padStart(2, "0"),
            hexG = Math.min(Math.max(inputG.value, 0), 255).toString(16).padStart(2, "0"),
            hexB = Math.min(Math.max(inputB.value, 0), 255).toString(16).padStart(2, "0");
        
        // concatenate to a hex color string
        let resultColor = "#" + hexR + hexG + hexB; 
        
             // Send to output and set color of sample color patch.
            // toUpperCase() is performed once on the final string,
     // instead of the substrings
        resultOut.innerHTML = 
        colorOut.style.backgroundColor = resultColor.toUpperCase(); 
    }

body {
    margin: 0;
    padding: 0.5em 1.5em ;
    font-family: sans-serif;
    background-color: #ffd;
    }
    
h2, h3 { position: relative; font-style: oblique; }
h2 { margin: 0.5em 1em 0.5em;}
h3 { margin: 0.5em 2em 1.4em;}

#r,#g,#b {
    width: 5em;
    height: 1.75em;
    font-size: 1.33em;
    font-weight: 600;
    text-align: center; 
    border-radius: 0.6em;   
    }
#r { background:#fcc; }
#g { background:#cfc; }
#b { background:#ccf; }

.resultDiv {
    display: inline-block;
    position: relative;
    margin: 1.33em;
    padding: 0.5em 0.5em 2em;
    background-color: #4bb4;
    border-radius: 2em;
    text-shadow: 0.15em 0.15em 0.3em #6886;
    box-shadow: inset 3px 3px 6px #0448,
                      inset 0 0 22px #4888;
    }
.resultVal {
    position: relative;
    margin: 1em 2em;
    padding: 0em;
    }

#result {
  font-size: 1.5em;
  font-weight: 500;
  letter-spacing: 0.07em;
  color: #135a;
  text-shadow: -0.05em -0.05em 0.08em #defd,
                 0.05em 0.05em 0.08em #1238;
  }
#colorPatch {
    min-width: 5em;
    margin: 0.5em;
    padding: 0.5em 1em 2em;
    font-size: 1.25em;
    background-color: black;
    border: 0.33em solid #999;
    border-radius: 0.75em;
    box-shadow:  2px 2px 3px #2449; 
    }

<body>
    <h2>Enter integer RGB values</h2>
    <input id="r" type="number" onclick="select()" onblur="convert()" value="00"/>
    <input id="g" type="number" onclick="select()" onblur="convert()" value="00"/>
    <input id="b" type="number" onclick="select()" onblur="convert()" value="00"/>
    <br>
    <div class="resultDiv">
    <h3>Result as a HEX string</h3>
    <div class="resultVal">THE COLOR IS:
        <span id="colorPatch" > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><br>
        <span id="result">#000000</span>
    </div> 
    </div> 
</body>

【讨论】：