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

Question

我正在尝试与我的 friend 一起制作一个将摄氏度转换为华氏度的网站。我们目前拥有它，因此您可以在一个框中输入数字，然后从另一个单元的另一个框中显示出来。

如果输入的摄氏度或华氏度高于或低于某个数字，我们希望页面改变颜色。

谢谢你的帮助:)

当前代码:

<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>温度计

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

---

HTML

标签

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

• 更改了 <input type="text">至 <input type="number">

仪表属性

• max="140"

• min="-51"

• high="99" 100℃ 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 设计类(class)。 绿色到金色。

---

演示

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