HTML上で温度単位相互変換ツールを作ってみました。
計算式は・・・
摂氏から華氏=(華氏-32)×5÷9
華氏から摂氏=(摂氏×9÷5)+32
摂氏からケルビン＝摂氏+273.15
華氏からケルビン＝(華氏-32)×5÷9+273.15
ケルビンから摂氏＝ケルビン-273.15
ケルビンから華氏＝(ケルビン-273.5)×9÷5+32
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>温度単位 相互変換ツール</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 50px;
background-color: black;
color: white;
}
input {
padding: 8px;
font-size: 16px;
width: 120px;
text-align: center;
}
.container {
display: flex;
justify-content: center;
gap: 20px;
align-items: center;
margin-bottom: 10px;
}
label {
font-size: 18px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>摂氏 ⇄ 華氏 ⇄ ケルビン 変換ツール</h2>
<div class="container">
<label>摂 氏 (°C): </label>
<input type="number" id="celsius" oninput="convertFromCelsius()" placeholder="0">
</div>
<div class="container">
<label>華 氏 (°F): </label>
<input type="number" id="fahrenheit" oninput=
"convertFromFahrenheit()" placeholder="32">
</div>
<div class="container">
<label>ケルビン (K ): </label>
<input type="number" id="kelvin" oninput=
"convertFromKelvin()" placeholder="273.15">
</div>
<script>
// 摂氏を求める
function convertFromCelsius() {
let celsius = parseFloat(document.
getElementById("celsius").value);
if (!isNaN(celsius)) {
document.getElementById("fahrenheit").
value = ((celsius * 9/5) + 32).toFixed(2);
document.getElementById("kelvin").
value = (celsius + 273.15).toFixed(2);
} else {
clearFields();
}
}
// 華氏を求める
function convertFromFahrenheit() {
let fahrenheit = parseFloat(document.
getElementById("fahrenheit").value);
if (!isNaN(fahrenheit)) {
let celsius = (fahrenheit - 32) * 5/9;
document.getElementById("celsius").
value = celsius.toFixed(2);
document.getElementById("kelvin").
value = (celsius + 273.15).toFixed(2);
} else {
clearFields();
}
}
// ケルビンを求める
function convertFromKelvin() {
let kelvin = parseFloat(document.
getElementById("kelvin").value);
if (!isNaN(kelvin)) {
let celsius = kelvin - 273.15;
document.getElementById("celsius").
value = celsius.toFixed(2);
document.getElementById("fahrenheit").
value = ((celsius * 9/5) + 32).toFixed(2);
} else {
clearFields();
}
}
function clearFields() {
document.getElementById("fahrenheit").value = "";
document.getElementById("celsius").value = "";
document.getElementById("kelvin").value = "";
}
</script>
</body>
</html>
表示直後の状態
摂氏を入力すると、摂氏に対応している華氏とケルビンを表示
摂氏を入力すると、摂氏に対応している摂氏とケルビンを表示
ケルビンを入力すると、ケルビンに対応している摂氏と華氏を表示
