如何根据用户输入和算法更改背景色

Question

我正试图与我的朋友建立一个将摄氏温度转换为华氏温度的网站。当前，我们拥有它，因此您可以在一个框中输入数字，而在另一个框中显示另一个数字。

如果输入的摄氏温度或华氏温度高于或低于特定数字，我们希望页面更改颜色。

谢谢您的帮助：）

当前代码：          

<p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>

<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>
<script>
function convert(degree) {
    var x;
    if (degree == "C") {
        x = document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value = Math.round(x);
    } else {
        x = (document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value = Math.round(x);
    }


}
</script>

</body>
</html>

Answer 1

<meter>温度计

我假设您正在制作温度计。有关如何将属性值同步到CSS background-color的详细信息，请参见 link 。

---

HTML

标签

• HTML5 <meter>标签是理想的元素。

• 将<input type="text">更改为<input type="number">

仪表属性

• max="140"

• min="-51"

• high="99" 100°C H ₂ O-金红色红色

的沸点

• low="1" 0°H ₂ O-金变红色

的凝固点

• optimum="23" 23℃室温

---

JavaScript

• 将keyup事件更改为input事件，因为它更快并且专门用于<input>标签。

• 已向JavaScript添加一行以控制<meter>标签：

  thermo.value = t.c.value;
  

  如果应用于OP代码，则等效项为：

  document.getElementById('thermo').value = document.getElementById("c").value
  

• if/else if/else条件将范围设置为15.5℃至26.5℃（60℉至80℉）-该范围由.comfortable类设置样式。 绿色到金色。

---

演示

#case {
  margin: 20px 40px 40px;
  transform: rotate(-90deg);
  width: fit-content;
}

#case label {
  transform: rotate(90deg);
  transform-origin: 53% 531%;
  height: 20px;
  width: 200px;
}

label {
  display: block
}

#thermo {
  width: 200px
}

meter::-webkit-meter-bar {
  background: #e6e6e9;
}

meter::-webkit-meter-optimum-value {
  background: gold;
}

meter.comfortable::-webkit-meter-optimum-value {
  background: green;
}

meter::-webkit-meter-suboptimum-value {
  background: red;
}

meter::-moz-meter-bar {
  background: #e6e6e9;
}

meter::-moz-meter-optimum-value {
  background: gold;
}

meter.comfortable::-moz-meter-optimum-value {
  background: green;
}

meter::-moz-meter-suboptimum-value {
  background: red;
}

#thermo {
  background: green;
}

<form id='temp'>
  <label><input id="c" oninput="convert('C')" type='number' max='140' min='-51' value='23'> ℃</label><br>

  <label><input id="f" oninput="convert('F')" type='number' max='290' min='-60' value='75'> ℉</label>

  <fieldset id='case'>
    <label for='thermo' data-max='140' data-min='-55' class='C'>℃</label>
    <meter id='thermo' max='140' high='99' low='1' min='-55' value='23' optimum='23' class='comfortable'></meter>
    <label for='thermo' data-max='290' data-min='-60' class='F'>℉</label>
  </fieldset>
</form>

<script>
  var temp = document.forms.temp;
  var t = temp.elements;
  var thermo = document.getElementById('thermo');

  function convert(degree) {
    var x;
    if (degree === "C") {
      x = t.c.value * 9 / 5 + 32;
      t.f.value = Math.round(x);
    } else {
      x = (t.f.value - 32) * 5 / 9;
      t.c.value = Math.round(x);
    }
    thermo.value = t.c.value;
    if (thermo.value >= 15.5 && thermo.value <= 26.5 && !thermo.classList.contains('comfortable')) {
      thermo.classList.add('comfortable');
      return false;
    } else if (thermo.value < 15.5 || thermo.value > 26.5 && thermo.classList.contains('comfortable')) {
      thermo.classList.remove('comfortable');
      return false;
    } else {
      return false;
    }
  }
</script>

Answer 2

一种简单的方法是在div中添加/删除一个类，并以此方式设置背景颜色。

例如：

ERROR TypeError: Cannot read property 'mid_tenant_name' of undefined
    at Object.eval [as updateDirectives] (PeInfoPropertyComponent.html:19)

}

Answer 3

您应该能够在函数内部添加另一个条件语句，该条件语句将CSS类添加到主体（或您想要的任何元素）。这是一个开始。我尚未测试过，但它应该为您指明正确的方向。

摄氏度

<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>
<script>
function convert(degree) {
    var x;
    if (degree == "C") {
        x = document.getElementById("c").value * 9 / 5 + 32;
        document.getElementById("f").value = Math.round(x);
        if(x > 30) {
            $(body).addClass('scorching-red');    
        } else {
            $(body).addClass('blue');
        }
    } else {
        x = (document.getElementById("f").value -32) * 5 / 9;
        document.getElementById("c").value = Math.round(x);
        if(x > 80) {
            $(body).addClass('scorching-red');    
        } else {
            $(body).addClass('blue');
        }
    }


}
</script>

</body>
</html>

Answer 4

在普通JS中，一种方法是检查celcius输入框的值（只是选择一个），将其与阈值进行比较并更改body的背景颜色

function convert(degree) {
  var x;
  let celciusInput = document.getElementById("c");
  if (degree == "C") {
    x = celciusInput.value * 9 / 5 + 32;
    document.getElementById("f").value = Math.round(x);
  } else {
    x = (document.getElementById("f").value - 32) * 5 / 9;
    celciusInput.value = Math.round(x);
  }
  
  let body = document.getElementsByTagName("body")[0];
  let temperature = +celciusInput.value;
  if (temperature >= 38) {
    body.style.background = "red";
  } else {
    body.style.background = "cyan";
  }
}

<p><input id="c" onkeyup="convert('C')"> degrees Celsius</p>

<p><input id="f" onkeyup="convert('F')"> degrees Fahrenheit</p>