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