如何创建:温度转换器

学习如何使用 HTML 和 JavaScript 创建温度转换器。

温度转换器

在任意字段中键入一个值,可在温度计量单位之间进行转换:

创建温度转换器

创建一个输入元素,可将一个温度计量单位转换为另一个温度计量单位。

第一步 - 添加 HTML:

<p>
  <label>Fahrenheit</label>
  <input id="inputFahrenheit" type="number" placeholder="Fahrenheit"
  oninput="temperatureConverter(this.value)"
  onchange="temperatureConverter(this.value)">
</p>
<p>Celsius: <span id="outputCelsius"></span></p>

第二步 - 添加 JavaScript:

华氏度换算为摄氏度:

/* 当输入字段接收到输入时,将值从华氏度转换为摄氏度 */
function temperatureConverter(valNum) {
  valNum = parseFloat(valNum);
  document.getElementById("outputCelsius").innerHTML = (valNum-32) / 1.8;
}

亲自试一试

从华氏度转换为其他计量单位

下表展示了如何从华氏温度转换为其他温度计量单位:

描述 公式 例子
转换华氏度为摄氏度 ℃=(℉-32)/1.8 试一试
转换华氏度为开尔文 K=((℉-32)/1.8)+273.15 试一试

从摄氏度转换为其他计量单位

下表展示了如何从摄氏度转换为其他温度计量单位:

描述 公式 例子
转换摄氏度为为华氏度 ℉=(℃*1.8)+32 试一试
转换摄氏度为开尔文 K=℃+273.15 试一试

从开尔文转换为其他计量单位

下表展示了如何将开尔文转换为其他温度计量单位:

描述 公式 例子
转换开尔文为华氏度 ℉=((K-273.15)*1.8)+32 试一试
转换开尔文为摄氏度 ℃=K-273.15 试一试