在 HTML 和 JavaScript 中使用两种颜色标度着色答案

【问题标题】：Coloring with a two color scale in HTML and JavaScript在 HTML 和 JavaScript 中使用两种颜色标度着色
【发布时间】：2020-09-16 02:07:20
【问题描述】：

我有一个 input 元素，它的值是介于 0 和 100 之间的数字。我正在尝试通过双色标度设置元素的样式，并将其值作为输入。

我打算做一个简单的渐变：

当数字为100时，元素的背景色为绿色#00ff00
数字为0时为红色#ff0000
数字为50时显示黄色#ffff00

中间值应根据比例着色。

我曾尝试在 JavaScript 中使用 if 语句，但未能创建渐变，因为红色、黄色和绿色之间存在硬边界（无渐变）。请看下面的代码：

var x = 0;

function color() {
    x = document.getElementById("color").value;
    console.log(x);

    if (x > 50) {
        document.getElementById('color').style.backgroundColor = "#00ff00";
    }
    else if (x == 50) {
        document.getElementById('color').style.backgroundColor = "#ffff00";
    }
    else {
        document.getElementById('color').style.backgroundColor = "#ff0000";
    }
}

<button onclick="color();">Run</button>
<input type="number" id='color' value=50></input>
<!-- The input is not disabled for value debugging. -->

有没有简洁的方法来执行这个任务？

【问题讨论】：

由于 SO 不是代码编写服务，您应该发布您编写的代码以尝试解决此问题。
我刚刚做了，虽然我很困惑如何处理代码

标签： javascript html input colors linear-gradients

【解决方案1】：

您可以为此目的使用 Html Range 输入并使用 javascript 获取其值。喜欢：

<input id="myId" type="range" min="0" max="100">

使用 Javascript 通过其 ID 获取其值。使用 Javascript 函数。使用按钮调用它或添加 onchange 事件。

您只是缺少一个样式属性... 就这样做

document.getElementById("color").style.background = "Any Color";

或者如果你想改变文字颜色那么

document.getElementById("color").style.color = "Any Color";

这里我为你的问题写了完整的代码：-

<input type="number" id="color" min="0" max="100" onkeyup="check()">
<script>
    function check(){
        c = document.getElementById("color");
        x = c.value;
        if(x==0)
            c.style.background="Red";
        else if(x==50)
            c.style.background = "Yellow";
        else
            c.style.background = "Green";
    }
</script>

【讨论】：

那么，onchange 事件或函数的代码是什么？
我试过这段代码。脚本不显示渐变（橙色为 25，红色为 0，绿色为 100），如果x = 0，则脚本将其设置为红色，如果x = 50 设置为黄色，如果x 是其他颜色，则无论如何，输入都是绿色的。这是一个错误吗？

【解决方案2】：

我找到了创建使用鲜艳的十六进制颜色的 2 色标的最佳方法：

var colval = 0;
var R = 0;
var G = 0;
var B = 0;

function check() {

  c = document.getElementById("color");
  x = c.value;

  if (x > 50) {

    R = Math.round(-0.051 * x ** 2 + 2.55 * x + 255);
    G = 255;

  } else if (x < 50) {

    R = 255;
    G = Math.round(-0.051 * x ** 2 + 7.65 * x + 0);

  } else {

    R = 255;
    G = 255;

  }

  B = 0;

  colval = "#" + R.toString(16) + G.toString(16) + "00";
  c.style.background = colval;
}

<html>

<body>
  <input type="number" id="color" min="0" max="100" value="0" onkeyup="check()">

</body>

</html>

【讨论】：

【解决方案3】：

const updateColor = (target) => {
    const value = target.value;
    //#00ff00 100
    //#ffff00 50
    //#ff0000 0
    const R = Math.round((255 / 50) * (value < 50 ? 50 : 100 - value)).toString(16)
    const G = Math.round((255 / 50) * (value > 50 ? 50 : value)).toString(16)
    const twoDigit = (d) => ("0" + d).slice(-2);
    const nextColor = '#' + twoDigit(R) + twoDigit(G) + '00';
    target.style.background = nextColor

  }
  document.getElementById('color').addEventListener('change', (e) => updateColor(e.target));
  document.addEventListener("DOMContentLoaded", function (event) {
    updateColor(document.getElementById('color'))
  });

<html>

<body>
   <input type="number" id="color" min="0" max="100" value="0">
</body>

</html>

【讨论】：

在我的本地计算机中，背景颜色为“红色”。恐怕它不能在 sn-p 模式下工作。