javascript - 如何从 HTML 页面中的 3 个输入范围正确获取 RGB 值

Question

我目前正在为我的 LED 开发网络界面。所以我想要 3 个 slider ，我可以从那里向我的 Controller 发送一个十六进制值。

这是我目前所拥有的:

    <div class="main">
        <div class="slideContainer">
            <input type="range" class="slider" value="0" min="0" max="255" step="1" id="sliderRed" style="background: linear-gradient(to right, black 0%, red 70%);">
        </div>
        <div class="slideContainer">
            <input type="range" class="slider" value="0" min="0" max="255" step="1" id="sliderGreen" style="background: linear-gradient(to right, black, green 70%);">
        </div>
        <div class="slideContainer">
            <input type="range" class="slider" value="0" min="0" max="255" step="1" id="sliderBlue" style="background: linear-gradient(to right, black, blue 70%);">
        </div>
    </div>

和 JS 获取我可以发送到我的 Controller 的十六进制值:

    sliderRed.oninput = function () {
        var red = sliderRed.value;
        var green = sliderGreen.value;
        var blue = sliderBlue.value;
        color(red, green, blue);
    }
    sliderGreen.oninput = function () {
        var red = sliderRed.value;
        var green = sliderGreen.value;
        var blue = sliderBlue.value;

        color(red, green, blue);
    }
    sliderBlue.oninput = function () {
        var red = sliderRed.value;
        var green = sliderGreen.value;
        var blue = sliderBlue.value;

        color(red, green, blue);
    }

    function color(r, g, b) {
        console.log(rgbToHex(r, g, b));
    }

    function rgbToHex(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

我从上面的代码得到的结果与我想要得到的 #000000 和 #ffffff 之间的值相去甚远。 相反，如果我移动 slider ，我会得到类似 #86122240 的值，即使如果我从按钮中输入静态值，函数 color() 确实有效。

Answer 1

您正在尝试将您的 rgb 值作为字符串推送到您的 rgbToHex() 函数。只需先在您的 color() 函数中使用 parseInt() 将它们转换为整数即可函数，然后将转换后的 rgb 值发送到您的 rgbToHex() 函数。

此外，所有三个输入监听器都在做同样的事情，因此只需创建一个名为 say、assignRGB() 的单独函数，并在调用这三个 slider 的输入事件中的任何一个时调用该函数.

您还可以使用 querySelectorAll() 进一步清理代码方法来检索所有三个输入并将输入监听器添加到每个输入。

---

检查并运行以下代码片段以获取上述方法的实际示例:

const rgbSliders = document.querySelectorAll('.slider');

function assignRGB() {
    var red = sliderRed.value;
    var green = sliderGreen.value;
    var blue = sliderBlue.value;
    color(red, green, blue);
}

rgbSliders.forEach(function(slider){
  slider.addEventListener('input', assignRGB);
});

function color(r, g, b) {
  const x = parseInt(r);
  const y = parseInt(g);
  const z = parseInt(b);

  console.log(rgbToHex(x,y,z));
}

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

<div class="main">
        <div class="slideContainer">
            <input type="range" class="slider" value="0" min="0" max="255" step="1" id="sliderRed" style="background: linear-gradient(to right, black 0%, red 70%);">
        </div>
        <div class="slideContainer">
            <input type="range" class="slider" value="0" min="0" max="255" step="1" id="sliderGreen" style="background: linear-gradient(to right, black, green 70%);">
        </div>
        <div class="slideContainer">
            <input type="range" class="slider" value="0" min="0" max="255" step="1" id="sliderBlue" style="background: linear-gradient(to right, black, blue 70%);">
        </div>
    </div>