Question

我想使用JS制作RGB到HEX转换器。要做到这一点，我做了以下代码：

function convertToHex(){

            var r=document.getElementById("R").value;
            var g=document.getElementById("G").value;
            var b=document.getElementById("B").value;


            if(r>255 || g>255 || b>255){
                document.getElementById("error").innerHTML='R ,G, B value can not be greater than 255';

            }
            else{
                var rHex=r.toString(16);
                var gHex=g.toString(16);
                var bHex=b.toString(16);

                var toHex=rHex+gHex+bHex;
                document.getElementById("hexContainer").innerHTML=toHex;
            }       

        }

但它不起作用。请你帮助我好吗。它显示的数字只是没有转换的值。

Answer 1

从HTML中获取值时，需要将字符串转换为数字

你可以做到

var r = Number(document.getElementById("R").value);

我测试了其余代码，它们工作正常。

Answer 2

你可以尝试这种方式。它很完美。

<body>
 <input id="R" type="number">
 <br>
 <input id="G" type="number">
 <br>
 <input id="B" type="number">
 <br>
 <input id="btn" type="button"    onclick="rgb2hex()" value="calculate">
 <div id= "hexContainer"></div>
 <div id="error"></div>

<script>
function rgb2hex() {
var r = document.getElementById("R").value
    var g = document.getElementById("G").value
        var b =document.getElementById("B").value
 if (r> 255 || g> 255 || b> 255){
            document.getElementById( "error" ).innerHTML= 'R ,G, B value can not be greater than 255' ;
            document.getElementById( "hexContainer").innerHTML=""
        }
else {
document.getElementById( "hexContainer").innerHTML= ("#"+dec2Hex(Math.round(r)) +""+ dec2Hex(Math.round(g)) +""+dec2Hex(Math.round(b)));

document.getElementById( "error").innerHTML=""
}
 }
 function dec2Hex(decimal) {
return ("0"+(Number(decimal).toString(16))).slice(-2).toUpperCase()
}
  </script>
 </body>

Answer 3

function convertToHex（）{

        var r=document.getElementById("R").value;
        var g=document.getElementById("G").value;
        var b=document.getElementById("B").value;


        if(+r>255 || +g>255 || +b>255){
            document.getElementById("error").innerHTML='R ,G, B value can not be greater than 255';

        }
        else{
            var rHex=(+r).toString(16);
            var gHex=(+g).toString(16);
            var bHex=(+b).toString(16);

            var toHex=rHex+gHex+bHex;
            document.getElementById("hexContainer").innerHTML=toHex;
        }       

    }

如何在js中将数字转换为hexa字符串

3 个答案: