在 HTML 和 JavaScript 中使用两种色标着色

Question

我有一个 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. -->

有没有简洁的方法来完成这个任务？

Answer 1

您可以为此目的使用 Html 范围输入，并使用 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>

Answer 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>

Answer 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>

在 HTML 和 JavaScript 中使用两种色标着色

Coloring with a two color scale in HTML and JavaScript

html

javascript

input

colors

linear-gradients