首頁 > web前端 > 前端問答 > 溫度轉換程式Javascript

溫度轉換程式Javascript

王林
發布: 2023-05-09 19:01:05
原創
872 人瀏覽過

隨著科技的快速發展,電腦程式的編寫成為了人們生活中不可或缺的一部分。溫度轉換程序是生活中比較常用的小程序,可以將攝氏溫度轉換成華氏溫度,或是將華氏溫度轉換成攝氏溫度。在本文中,我們將介紹一種使用Javascript編寫的溫度轉換程序,幫助人們更方便進行溫度轉換。

在開始編寫程式之前,首先需要先明確一下攝氏溫度和華氏溫度的轉換公式。溫度單位的轉換是透過下面的公式進行的:

華氏溫度= 攝氏溫度× 1.8 32

攝氏溫度= (華氏溫度- 32) ÷ 1.8

了解了公式,我們就可以開始寫程式了。

首先,我們需要在HTML檔案中新增一個表單,用於輸入溫度值和選擇溫度單位。程式碼如下:

<form>
  <label>输入温度:</label>
  <input type="number" id="temperature">

  <label>选择温度单位:</label>
  <select id="unit">
    <option value="celsius">摄氏度</option>
    <option value="fahrenheit">华氏度</option>
  </select>

  <button type="button" onclick="convertTemperature()">转换</button>

  <div id="result"></div>
</form>
登入後複製

這個表單包含了一個輸入框、一個下拉框和一個按鈕。輸入框用於輸入溫度值,下拉框用於選擇溫度單位,按鈕用於觸發轉換函數。轉換完成後,將會在

標籤中顯示轉換結果。

接下來,我們需要寫Javascript程式碼來完成轉換過程。程式碼如下:

<script>
  function convertTemperature() {
    // 获取用户输入的数值和单位
    var temperature = document.getElementById("temperature").value;
    var unit = document.getElementById("unit").value;

    // 如果输入为空,则提示用户输入数字
    if (isNaN(temperature)) {
      document.getElementById("result").innerHTML = "请输入数字!";
      return;
    }

    // 根据选择的单位进行温度转换
    if (unit === "celsius") {
      var fahrenheit = temperature * 1.8 + 32;
      document.getElementById("result").innerHTML = temperature + "摄氏度 = " + fahrenheit + "华氏度";
    } else {
      var celsius = (temperature - 32) / 1.8;
      document.getElementById("result").innerHTML = temperature + "华氏度 = " + celsius + "摄氏度";
    }
  }

</script>
登入後複製

首先,我們定義了一個名為convertTemperature的函數,在該函數中取得使用者輸入的溫度值和溫度單位。然後,我們使用了一個if語句來判斷使用者是否輸入了一個數字。如果使用者輸入的不是數字,則使用innerHTML將提示訊息顯示在

標籤中,並退出函數。如果使用者輸入了數字,則根據所選的溫度單位進行轉換,並將結果顯示在
標籤中。

至此,我們的溫度轉換程式就完成了,可以在任意支援Javascript的瀏覽器上運作。使用者只需輸入數字並選擇溫度單位,即可輕鬆完成溫度轉換。

最後,需要注意的是,該程序只是一個簡單的範例程序,還有很多可以改進的地方。例如,可以增加對使用者輸入錯誤的處理,或最佳化介面的佈局。無論如何,Javascript編寫溫度轉換程式的方法是非常簡單易懂的,希望這篇文章能幫助讀者更了解Javascript語言。

以上是溫度轉換程式Javascript的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板