javascript - 从百分比设置特定梯度

Question

我有一个代码可以根据值(从 0 到 200%)生成颜色

实际上，幽灵是绿-黄-红。

我想将渐变更改为绿-灰-红:如果百分比 < 100% 则为绿色，如果在 100% 字段中则为灰色，如果 > 100% 则为红色。

我不知道如何使用数学公式来做到这一点。

window.onload = function() {
  let colorShower = document.querySelector('.color-shower')
  let colorSlider = document.querySelector('#colorSlider')

  let percentage = (200 -colorSlider.value) /2
  let buildColor = (capHue) => `hsl(${capHue},90%,60%)`
    
  colorShower.style.backgroundColor = buildColor(percentage)
  
  colorSlider.addEventListener('input', e => {
    percentage = (200 -colorSlider.value) /2
    colorShower.style.backgroundColor = buildColor(percentage)
  })
}

.color-shower {
  width: 100%;
  height: 50px;
}

.color-slider {
  width: 100%;
}

<div class = "color-shower"></div>
<input type = "range" min = "1" max = "200" value = "1" class = "color-slider" id = "colorSlider">

Answer 1

编辑:好的，我用动态解决方案更新了我的回复。我创建了包装器 <div>显示/输入元素周围的元素。这些包装器允许您定义 start-hue和end-hue数据属性。它们用作显示的渐变开始/结束。

很容易错过(因为你必须一直滚动到底部)，但是使用下面的插件；您可以调用GradientSlider()页面加载后。

“静态”默认属性位于函数定义的底部。这可以轻松地重写为 ES5/6 类。

GradientSlider.defaultOptions = {
  selector : '.gradient-slider'
};

下面创建了各种 slider 。我借用了 Infodev 的绝对值技巧，在 slider 接近 50% 时调整饱和度值。

function GradientSlider(options) {
  let opts = Object.assign({}, GradientSlider.defaultOptions, options);

  construct(opts.selector); // Begin...

  function construct(selector) {
    Array.from(document.querySelectorAll(selector))
      .forEach(gradientSlider => initializeSlider(gradientSlider));
  }

  function initializeSlider(gradientSlider) {
    let hueStart = parseInt(gradientSlider.getAttribute('data-start-hue'), 10);
    let hueEnd = parseInt(gradientSlider.getAttribute('data-end-hue'), 10);
    let display = gradientSlider.querySelector('.gradient-slider-display');
    let slider = gradientSlider.querySelector('.gradient-slider-input');
    slider.addEventListener('input', onSliderChange);

    let percentage = getSliderPercentage(slider);
    let hue = percentage < 50 ? hueStart : hueEnd;
    display.style.backgroundColor = calculateColor(hue, percentage);
  }

  function onSliderChange(e) {
    let gradientSlider = e.target.parentElement;
    let hueStart = parseInt(gradientSlider.getAttribute('data-start-hue'), 10);
    let hueEnd = parseInt(gradientSlider.getAttribute('data-end-hue'), 10);
    let display = gradientSlider.querySelector('.gradient-slider-display');
    let percentage = getSliderPercentage(e.target);
    let hue = percentage < 50 ? hueStart : hueEnd;
    display.style.backgroundColor = calculateColor(hue, percentage)
  }

  function calculateColor(hue, percentage) {
    return `hsl(${hue}, ${Math.abs(50 - percentage)}%, 50%)`;
  }

  function getSliderPercentage(slider) {
    let value = parseInt(slider.value, 10);
    let minValue = parseInt(slider.getAttribute('min'), 10);
    let maxValue = parseInt(slider.getAttribute('max'), 10);
    return scaleBetween(value, 0, 100, minValue, maxValue);
  }

  // Source: https://stackoverflow.com/a/60514474/1762224
  function scaleBetween(n, tMin, tMax, sMin, sMax) {
    return (tMax - tMin) * (n - sMin) / (sMax - sMin) + tMin;
  }
}

GradientSlider.defaultOptions = {
  selector : '.gradient-slider'
};

GradientSlider(); // Call the plugin...

.gradient-slider,
.gradient-slider > .gradient-slider-display,
.gradient-slider > .gradient-slider-input {
  width: 100%;
}
.gradient-slider-display {
  height: 50px;
}

<div class="gradient-slider" data-start-hue="120" data-end-hue="0">
  <div class="gradient-slider-display"></div>
  <input class="gradient-slider-input" type="range" min="1" max="200" value="1" />
</div>

<div class="gradient-slider" data-start-hue="240" data-end-hue="300">
  <div class="gradient-slider-display"></div>
  <input class="gradient-slider-input" type="range" min="50" max="150" value="75" />
</div>

<div class="gradient-slider" data-start-hue="30" data-end-hue="180">
  <div class="gradient-slider-display"></div>
  <input class="gradient-slider-input" type="range" min="0" max="10" value="7" />
</div>