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的“键”上触发了最后两个字段的更新，因此在任何其他情况下都不会更新。您可以通过在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>

颜色不想自动转换

2 个答案: