介绍
各位开发者大家好！我很高兴分享我的最新项目：实用的温度转换器。该项目非常适合那些希望通过处理用户输入、执行转换和动态更新 dom 来增强 javascript 技能的人。无论您是初学者还是经验丰富的开发人员，此温度转换器都是了解单位转换基础知识的绝佳项目。
ShopWind网店系统
下载
ShopWind网店系统是国内最专业的网店程序之一，采用ASP语言设计开发，速度快、性能好、安全性高。ShopWind网店购物系统提供性化的后台管理界面，标准的网上商店管理模式和强大的网店软件后台管理功能。ShopWind网店系统提供了灵活强大的模板机制，内置多套免费精美模板，同时可在后台任意更换，让您即刻快速建立不同的网店外观。同时您可以对网模板自定义设计，建立个性化网店形象。ShopWind网
项目概况
温度转换器是一款基于网络的应用程序，可让用户轻松在摄氏度、华氏度和开尔文之间转换温度。该项目演示了如何创建交互式用户界面、处理计算并向用户提供实时反馈。
特征- 用户友好的界面：简单直观的设计，易于使用。
- 实时转换：输入温度值时立即转换。
- 响应式设计：布局适应不同的屏幕尺寸，在桌面和移动设备上提供无缝体验。
- 多单位支持：在摄氏度、华氏度和开尔文之间转换。
- html：构建网页和输入元素。
- css：设置界面样式，确保简洁且响应灵敏的设计。
- javascript：处理转换逻辑并实时更新温度值。
以下是项目结构的快速浏览：
temperature-converter/ ├── index.html ├── styles.css └── script.js
- index.html：包含温度转换器的 html 结构。
- styles.css：包含 css 样式以增强转换器的外观。
- script.js：管理转换逻辑和动态更新。
要开始该项目，请按照以下步骤操作：
-
克隆存储库:
git clone https://github.com/abhishekgurjar-in/temperature-converter.git
-
打开项目目录：
cd temperature-converter
-
运行项目:
- 在网络浏览器中打开index.html文件以开始使用温度转换器。
- 在网络浏览器中打开网站。
- 在摄氏度、华氏度或开尔文输入字段中输入温度值。
- 查看转换后的值在相应字段中自动更新。
- 如果您想开始新的转换，请重置字段。
超文本标记语言
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>
css
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: #202124124;
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;
}
javascript
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 操作。
作者
- 阿布舍克·古贾尔
-
github 简介
