各位開發者大家好！我很高興分享我的最新項目：實用的溫度轉換器。該專案非常適合希望透過處理使用者輸入、執行轉換和動態更新 DOM 來增強 JavaScript 技能的人。無論您是初學者還是經驗豐富的開發人員，此溫度轉換器都是了解單位轉換基礎知識的絕佳項目。
溫度轉換器是一個基於網路的應用程序，允許用戶輕鬆地在攝氏度、華氏度和開爾文之間轉換溫度。此專案示範如何建立互動式使用者介面、處理計算並向使用者提供即時回饋。
以下是專案結構的快速瀏覽：
Temperature-Converter/ ├── index.html ├── styles.css └── script.js
要開始該項目，請按照以下步驟操作：
複製儲存庫：
git clone https://github.com/abhishekgurjar-in/Temperature-Converter.git
開啟專案目錄:
cd Temperature-Converter
運行項目:
index.html 檔案提供了溫度轉換器的基本結構，包括攝氏度、華氏度和開爾文的輸入欄位。這是一個片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Temperature Converter</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<video id="background-video" autoplay loop muted poster="https://assets.codepen.io/6093409/river.jpg">
<source src="./images/bg.mp4" type="video/mp4">
</video>
<div class="container">
<h1 class="heading">Temperature Converter</h1>
<div class="temp-container">
<label for="celsius">Celsius:</label>
<input
onchange="computeTemp(event)"
type="number"
name="celsius"
id="celsius"
placeholder="Enter Temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="fahrenheit">Fahrenheit:</label>
<input
onchange="computeTemp(event)"
type="number"
name="fahrenheit"
id="fahrenheit"
placeholder="Enter Temperature"
class="input"
/>
</div>
<div class="temp-container">
<label for="kelvin">Kelvin:</label>
<input
onchange="computeTemp(event)"
type="number"
name="kelvin"
id="kelvin"
placeholder="Enter Temperature"
class="input"
/>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
styles.css 檔案設定溫度轉換器的樣式，提供乾淨且響應式的佈局。以下是一些關鍵樣式：
body {
margin: 0;
background: url(./images/bg.mp4);
min-height: 100vh;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
font-family: monospace;
color: white;
}
.container {
background: #202124;
padding: 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
border-radius: 10px;
width: 85%;
max-width: 450px;
min-width: 350px;
display: flex;
flex-direction: column;
align-items: center;
}
.heading {
font-size: 32px;
}
.temp-container {
width: 100%;
padding: 15px;
font-weight: bold;
font-size: 18px;
}
.input {
width: 220px;
font-family: monospace;
padding: 5px;
float: right;
outline: none;
background: white;
border-color: white;
border-radius: 5px;
color: black;
font-size: 18px;
}
.input::placeholder {
color: gray;
}
#background-video {
width: 100vw;
height: 100vh;
object-fit: cover;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: -1;
}
.footer {
margin-top: 200px;
text-align: center;
}
script.js 檔案處理轉換邏輯，依照使用者輸入更新溫度值。這是一個片段：
const celsiusEl = document.getElementById("celsius");
const fahrenheitEl = document.getElementById("fahrenheit");
const kelvinEl = document.getElementById("kelvin");
function computeTemp(event) {
const currentValue = +event.target.value;
switch (event.target.name) {
case "celsius":
kelvinEl.value = (currentValue + 273.32).toFixed(2);
fahrenheitEl.value = (currentValue * 1.8 + 32).toFixed(2);
break;
case "fahrenheit":
celsiusEl.value = ((currentValue - 32) / 1.8).toFixed(2);
kelvinEl.value = ((currentValue - 32) / 1.8 + 273.32).toFixed(2);
break;
case "kelvin":
celsiusEl.value = (currentValue - 273.32).toFixed(2);
fahrenheitEl.value = ((currentValue - 273.32) * 1.8 + 32).toFixed(2);
break;
default:
break;
}
}
您可以在此處查看溫度轉換器的現場示範。
建立這個溫度轉換器是一次有益的經歷，它增強了我對 JavaScript 以及如何建立互動式 Web 應用程式的理解。我希望這個專案能夠激勵您進一步探索並建立自己的轉換工具。快樂編碼！
這個專案是我不斷提升 Web 開發技能的一部分，專注於 JavaScript 和 DOM 操作。
以上是建立一個溫度轉換器網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
