建立一个温度转换器网站

百变鹏仔 3个月前 (09-19) #CSS

文章标签建立一个

介绍

各位开发者大家好！我很高兴分享我的最新项目：实用的温度转换器。该项目非常适合那些希望通过处理用户输入、执行转换和动态更新 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>

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: #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;}

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 操作。

作者

文章推荐

建立一个温度转换器网站

介绍

项目概况

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写