颜色不想自动转换

Question

我是 javascript 菜鸟。

我制作了一个 hsl 颜色选择器，我想将 hsl 颜色自动转换为 rgb 和 hex。我从 w3schools 找到了一段代码，我想将其用于此目的。唯一的问题是只有手动输入颜色代码时才会转换颜色代码。

我希望在使用滑块中的 oniput 函数更改颜色后立即自动转换颜色。我只是不知道如何为此更改代码。

代码如下：

// below color converter
    // Make sure to include https://www.w3schools.com/lib/w3color.js
        var colora1, rgba1, hexa1;
    

        $('#colora1').on('keyup', function() {
          colora1 = w3color($(this).val());
          
          if(colora1.valid) {
            hexa1  = colora1.toHexString();
         
            $('#hexa1').html(hexa1);
            
            if(colora1.opacity == 1) {
              rgba1  = colora1.toRgbString();
              
              $('#rgbNamea1').text('Rgb');
              $('#hslNamea1').text('Hex');
            } 
            else {
              rgba1  = colora1.toRgbaString();
              hexa1  = colora1.toHslaString();
              
              $('#rgbNamea1').text('Rgba');
              $('#hslNamea1').text('Hsla');
            }
              
            $('#rgba1').html(rgba1);
            $('#hexa1').html(hexa1);
          }
          
        });

body{
  text-align: center;
}
#view-color{
  width: 200px;
  height: 200px;
  border: solid #000 1px;
  margin: 10px auto;
}
.colors{
  width: 200px;
  margin: 20px auto;
}
#colora1, textarea{
  width: 100%;
  height: 20px;
}

<div id="view-color" style="background-color: hsl(100, 100%, 50%)"></div><br>
hue<br>
<input oninput="changeColor()" type="range" id="hue" max="360" min="0" value="100"><br>
sat<br>
<input oninput="changeColor()" type="range" id="sat" max="100" min="0" value="100"><br>
light<br>
<input oninput="changeColor()" type="range" id="light" max="100" min="0" value="50">
    
<div class="colors">
  input<br>
    <input id="colora1" value="red" type="text">
  output rgb<br>
          <textarea id="rgba1" readonly>rgb(255, 0, 0)</textarea>
  output hex<br>
          <textarea id="hexa1" readonly>#ff0000</textarea>
 </div>
<script>
  function changeColor(){
    hue   = document.getElementById('hue').value;
    sat   = document.getElementById('sat').value;
    light = document.getElementById('light').value;
    hsl   = 'hsl('+hue+', '+sat+'%, '+light+'%)';

    document.getElementById('view-color').style.backgroundColor = hsl;
    document.getElementById('colora1').value = hsl;
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3color.js"></script>

Answer 1

您的代码不起作用，因为您仅在 colora1 的 "keyup" 上触发了最后两个字段的更新，因此在任何其他情况下都不会更新。您可以通过在 changeColor 结束时调用该函数来解决此问题。

你的 js 会是这样的：

    $('#colora1').on('keyup', function() {
        propagateColor();
    }

    function propagateColor() {
        var colora1, rgba1, hexa1;
        colora1 = w3color($(this).val());

        if(colora1.valid) {
            hexa1  = colora1.toHexString();

            $('#hexa1').html(hexa1);

            if(colora1.opacity == 1) {
                rgba1  = colora1.toRgbString();

                $('#rgbNamea1').text('Rgb');
                $('#hslNamea1').text('Hex');
            } 
            else {
                rgba1  = colora1.toRgbaString();
                hexa1  = colora1.toHslaString();

                $('#rgbNamea1').text('Rgba');
                $('#hslNamea1').text('Hsla');
            }

            $('#rgba1').html(rgba1);
            $('#hexa1').html(hexa1);
        }

    });

    function changeColor(){
        hue   = document.getElementById('hue').value;
        sat   = document.getElementById('sat').value;
        light = document.getElementById('light').value;
        hsl   = 'hsl('+hue+', '+sat+'%, '+light+'%)';

        document.getElementById('view-color').style.backgroundColor = hsl;
        document.getElementById('colora1').value = hsl;
        propagateColor()
    }

Answer 2

您需要在 changeColor 函数中获取十六进制和 rgb 颜色值，并将它们分配给相应的输入，就像您使用 hsl (document.getElementById('colora1').value = hsl;) 一样。您还需要更改

$('#rgba1').html(rgba1);
$('#hexa1').html(hexa1);

到

$('#rgba1').val(rgba1);
$('#hexa1').val(hexa1);

内部 keyup 回调函数。

// below color converter
    // Make sure to include https://www.w3schools.com/lib/w3color.js
        var colora1, rgba1, hexa1;
    

        $('#colora1').on('keyup', function () {
          colora1 = w3color($(this).val());
          
          if(colora1.valid) {
            hexa1  = colora1.toHexString();
         
            $('#hexa1').html(hexa1);
            
            if(colora1.opacity == 1) {
              rgba1  = colora1.toRgbString();
              
              $('#rgbNamea1').text('Rgb');
              $('#hslNamea1').text('Hex');
            } 
            else {
              rgba1  = colora1.toRgbaString();
              hexa1  = colora1.toHslaString();
              
              $('#rgbNamea1').text('Rgba');
              $('#hslNamea1').text('Hsla');
            }
 
            $('#rgba1').val(rgba1);
            $('#hexa1').val(hexa1);
          }
          
        });

body{
  text-align: center;
}
#view-color{
  width: 200px;
  height: 200px;
  border: solid #000 1px;
  margin: 10px auto;
}
.colors{
  width: 200px;
  margin: 20px auto;
}
#colora1, textarea{
  width: 100%;
  height: 20px;
}

<div id="view-color" style="background-color: hsl(100, 100%, 50%)"></div><br>
hue<br>
<input oninput="changeColor()" type="range" id="hue" max="360" min="0" value="100"><br>
sat<br>
<input oninput="changeColor()" type="range" id="sat" max="100" min="0" value="100"><br>
light<br>
<input oninput="changeColor()" type="range" id="light" max="100" min="0" value="50">
    
<div class="colors">
  input<br>
    <input id="colora1" value="red" type="text">
  output rgb<br>
          <textarea id="rgba1" readonly>rgb(255, 0, 0)</textarea>
  output hex<br>
          <textarea id="hexa1" readonly>#ff0000</textarea>
 </div>
<script>
  function changeColor(){
    hue   = document.getElementById('hue').value;
    sat   = document.getElementById('sat').value;
    light = document.getElementById('light').value;
    hsl   = 'hsl('+hue+', '+sat+'%, '+light+'%)';
    
    
    color = w3color(hsl);

    document.getElementById('view-color').style.backgroundColor = hsl;
    document.getElementById('colora1').value = hsl;
    document.getElementById('hexa1').value = color.toHexString();
    document.getElementById('rgba1').value = color.toRgbString();
}
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3color.js"></script>

颜色不想自动转换

color does not want to convert automatically

javascript

hsl

rgb

hex

converters