Элемент ввода цвета в двух цветовой шкале с заданным значением с использованием HTML - PullRequest
Новая
       1

Элемент ввода цвета в двух цветовой шкале с заданным значением с использованием HTML

0 голосов
/ 28 мая 2020

Я создаю программу HTML с CSS и JavaScript. Для части программы требуется отключенный элемент input, отображающий число от 0 до 100. Когда число равно 100, цвет фона ввода должен быть зеленым, когда число 0 - красным, а когда число 50 - желтым. Промежуточные значения должны быть окрашены в соответствии с масштабом.

Я пробовал использовать оператор if в JavaScript, но это вызывает ошибку программы, поскольку color не существует. 

<script>
    var x = 0
    if (x >= 50) {
        // document.getElementById('color').color = #00ff00 //
        // Note that the getElementById has a .color extension, which is nonexistent. //
    }
    else {
        // document.getElementById('color').color = #ff0000 //

</script>

<button>Run</button>
<input type="text" id='color' value='0'></input>
<!-- The input is not disabled for value debugging. -->

Есть ли лаконичный способ выполнить эту задачу? Если нет, то подойдет любой работающий код.

Ответы [ 2 ]

0 голосов
/ 02 июня 2020

Я нашел оптимальный способ создать двухцветную шкалу, в которой используются яркие шестнадцатеричные цвета: 

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>
0 голосов
/ 28 мая 2020

Вы можете использовать Html Диапазон ввода для этой цели и использовать javascript для получения его значения. Например: 

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

Используйте Javascript, чтобы получить его значение по его идентификатору. Используйте функцию 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...