如何創建:溫度轉換器

學習如何使用 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 試一試