Question

问题：我正在构建一个使用数字到十六进制转换器功能的绘图板应用程序。现在，他们只返回单个数字进行某些转换。

示例：r：0，g：0，b：0返回＃000，而不是＃000000我相信这就是为什么我无法正确更新颜色的原因，只有值可以使用。

期望的结果：我想将我的号码转换为两位数。因此R：0，G：0，B :)将转换为＃000000而不是＃000，尽管它们是相同的，其他颜色依赖于我的理解的两位数。基本上我希望我的所有数字到十六进制转换为6位数。

[已解决] ：更改了将我的值设为css＆r; s rgb的方式（r，g，b ）而不是使用十六进制值

JSBIN http://jsbin.com/doqiwocufa/edit?html,css,js,console,output

使用Javascript：

  var $red = 0;
  function changeRedNumboxValue(value) {
     var $numBox = $('#redNumber');
     $red = value;
     $numBox.val($red);
     console.log($red);
   }
   function changeRedSliderVal(value) {
     var $slider = $('#red');
     $red = value;
     $slider.val($red);
     console.log($red);
   }

   var $green = 0;
   function changeGreenNumboxValue(value) {
      var $numBox = $('#greenNumber');
      $green = value;
      $numBox.val($green);
      console.log($green);
    }
    function changeGreenSliderVal(value) {
      var $slider = $('#green');
      $green = value;
      $slider.val($green);
      console.log($green);
    }

    var $blue = 0;
    function changeBlueNumboxValue(value) {
       var $numBox = $('#blueNumber');
       $blue = value;
       $numBox.val($blue);
       console.log($blue);

     }
     function changeBlueSliderVal(value) {
       var $slider = $('#blue');
       $blue = value;
       $slider.val($blue);
       console.log($blue);
     }
  //CONVERT RGB TO HEX
  function rgbToHex() {
    $hexRed = $red.toString(16);
    $hexGreen = $green.toString(16);
    $hexBlue = $blue.toString(16);
    console.log($hexRed);
    console.log($hexGreen);
    console.log($hexBlue);
    return '#' + $hexRed + $hexGreen + $hexBlue;
  }
  //UPDATE COLOR BASED ON HEX VALUES
  function updateColor() {
    $colorChosen = $('#color-chosen');
    $color = rgbToHex();
    $colorChosen.css('background-color', $color);
  }
  updateColor();

HTML：

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <span>Blue</span>
              <input id="red" type="range" name="amount2" value="0" min="0" max="255" oninput="changeNumboxValue(this.value)">

              <input id="redNumber" type="number" name="amountInput2" value="0" min="0" max="255" oninput="changeSliderVal(this.value)">
</body>
</html>

CSS：

  #color-chosen  {
          border: 1px solid black;
          width: 100px;
          height: 100px;
          margin: 0 auto;
        }

Answer 1

实际上，#ABC将被解释为#AABBCC。如果在hexa中仅使用3个数字，则其颜色代码将是第一个字母的两倍，第二个字母的两倍和第三个字母的两倍。这意味着#000与#000000相同。对于其他颜色，您可能需要r:AB等。在这种情况下，g，b需要有两个字母。

我认为这是你的问题。有时你得到1个字母的颜色和2个其他颜色导致5个hexa数字转换。

Answer 2

您需要使用0进行一些填充，并使用String.prototype.slice()剪切字符串：

slice（）方法提取字符串的一部分并返回一个新字符串。

 $hexRed = ('0' +  $red.toString(16)).slice(-2);

将数字转换为十六进制值，但将它们设为两位数

2 个答案: