ホームページ > 記事 > ウェブフロントエンド > JavaScriptで変換温度を書く
JavaScriptで変換温度を書く
- PHPzオリジナル
- 2023-05-26 17:21:091019ブラウズ
日常生活では、摂氏を華氏に変換する必要がよくあります。この機能は、JavaScript を使用してコードを記述することで簡単に実現できます。この記事では、JavaScript を使用して簡単な温度変換プログラムを作成する方法を説明します。
ステップ 1: HTML ページ
まず、ユーザーが温度値を入力して変換を実行できるように、HTML ページを作成する必要があります。以下は HTML コードです:
<!DOCTYPE html>
<html>
<head>
<title>温度转换器</title>
</head>
<body>
<h1>温度转换器</h1>
<form>
<label>输入要转换的温度：</label>
<input type="text" id="temperature">
<br><br>
<input type="radio" name="converter" value="celsius">摄氏度转华氏度
<input type="radio" name="converter" value="fahrenheit">华氏度转摄氏度
<br><br>
<input type="button" value="转换" onclick="convertTemperature()">
</form>
<br>
<p id="result"></p>
</body>
</html>上記のコードには、タイトルと、入力ボックス、ラジオ ボタン、「変換」ボタンを含むフォームが含まれています。変換された結果を表示するための段落をページの下に追加しました。
ステップ 2: JavaScript 関数
次に、ユーザーが「変換」ボタンをクリックしたときに温度変換を実行する JavaScript 関数を記述する必要があります。以下は JavaScript コードです:
function convertTemperature() {
var input = document.getElementById("temperature");
var temperature = input.value;
var radio = document.getElementsByName("converter");
var result = document.getElementById("result");
if (radio[0].checked) {
var fahrenheit = (temperature * 9 / 5) + 32;
result.innerHTML = temperature + " 摄氏度 = " + fahrenheit + " 华氏度";
} else {
var celsius = (temperature - 32) * 5 / 9;
result.innerHTML = temperature + " 华氏度 = " + celsius + " 摄氏度";
}
}上記のコードは、getElementById、getElementsByName、および innerHTML 関数を使用して、ユーザーが入力した温度値を取得し、ユーザーが選択した変換タイプを取得し、変換結果を表示します。
ユーザーが「摂氏から華氏へ」を選択した場合、プログラムはデータ型数値型を置き換えて変数温度に割り当て、入力値に 9/5 を乗算して 32 を加算して、対応する華氏を計算します。 , 最後に変換結果を出力します。
逆に、ユーザーが「華氏から摂氏」を選択した場合、プログラムはデータ型数値も値に置き換えて変数温度に代入し、そこから 32 を引いて 5 を掛けます。 /9 を計算します。対応する摂氏度を出力し、変換結果も出力します。
ステップ 3: プログラムを実行します
最後に、ブラウザでプログラムを実行すると、単純な温度コンバータが表示されます。温度変換結果を確認した後、簡単に摂氏に変換できます。華氏または華氏から摂氏。 JavaScript コードが正しく、ドキュメント オブジェクト モデル (DOM) に従って、温度値、変換タイプ、および出力結果を取得して処理していることを確認してください。
概要:
上記の簡単な手順を通じて、非常に実用的な JavaScript 温度コンバーターを作成できます。このプログラムはシンプルですが、拡張性が高く、単位選択の追加、より多くの温度レジームのサポートなど、さまざまなニーズを満たすためにより多くの機能を実装できます。これは、汎用スクリプト言語としての JavaScript の強力な有用性も示しています。
以上がJavaScriptで変換温度を書くの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。