建立一个体重转换器网站

介绍

各位开发者大家好！我很高兴向大家介绍我的最新项目：重量转换器。这个项目是一个简单而实用的工具，可以帮助用户将体重从磅转换为公斤。这是练习 JavaScript 的绝佳方法，特别是在处理用户输入、计算和 DOM 操作方面。无论您是 JavaScript 新手还是正在寻找一个有趣、快速的项目，这个权重转换器都是您的完美选择。

项目概况

重量转换器是一个网络应用程序，允许用户输入以磅为单位的重量并获得以千克为单位的等效重量。该项目展示了如何使用表单输入、在 JavaScript 中执行计算以及根据用户输入动态更新网页内容。

特征

• 用户输入处理：接受以磅为单位的用户输入并将其转换为千克。
• 验证：显示无效输入的错误消息（例如，非数字或负值）。
• 实时计算：随着用户输入立即更新转换结果。
• 响应式设计：布局设计为响应式，可在不同设备上提供一致的体验。

使用的技术

• HTML：构建权重转换器界面。
• CSS：设置转换器的样式，包括响应式布局和错误处理。
• JavaScript：管理用户输入验证、权重转换和 DOM 更新。

项目结构

以下是项目结构的快速浏览：

Weight-Converter/
├── index.html
├── styles.css
└── script.js

• index.html：包含权重转换器的 HTML 结构。
• styles.css：包括布局和响应式设计的 CSS 样式。
• script.js：处理权重转换和输入验证的逻辑。

安装

要开始该项目，请按照以下步骤操作：

1. 克隆存储库：
   

   git clone https://github.com/abhishekgurjar-in/Weight-Converter.git
   

2. 打开项目目录:
   

   cd Weight-Converter
   

3. 运行项目:

   • 在网络浏览器中打开index.html文件以使用权重转换器。

用法

1. 在网络浏览器中打开网站。
2. 在输入字段中输入重量（以磅为单位）。
3. 查看页面上显示的转换后的重量（以千克为单位）。如果输入无效，将会出现错误消息。

代码说明

超文本标记语言

index.html 文件设置了权重转换器的结构，包括输入字段和结果显示。这是一个片段：

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Weight Converter6e916e0f7d1e588d4f442bf645aedb2f
    d8b7823904473d155afe66ded7e78f93
    5de102113aede4703971b3b780c58efb2cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    4883ec0eb33c31828b7c767c806e14c7
      4a249f0d628e2318394fd9b75b4636b1Weight Converter473f0a7621bec819994bb5020d29372a
      1adfcf403e84ee950da4e51ec7bcc58ePounds8c1ecd4bb896b2264e0711597d40766c
      2bd967a228ad4dd6dd46bd4135780e50
      e388a4556c0f65e1904146cc1a846beeYour weight in kg is: 1d8fe9c7fe60ca65fea7ef18556b479354bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3
      fcc3d86900ee5e367762a3d4e4f4c3eb94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

CSS

styles.css 文件设置权重转换器的样式，包括输入字段、错误消息和布局。以下是一些关键样式：

body {
    margin: 0;
    background-color: black;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-family: 'Courier New', Courier, monospace;
    color: white;
  }

  .container {
    background: rgba(141, 133, 133, 0.632);
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    width: 85%;
    max-width: 450px;
    margin-bottom: 200px;
  }

  .input-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    font-weight: 700;
  }

  .input {
    padding: 10px;
    width: 70%;
    background: rgb(255, 253, 253);
    border-color: rgba(0, 0, 0, 0.5);
    font-size: 18px;
    border-radius: 10px;
    color: rgb(0, 0, 0);
    outline: none;
  }

  .error {
    color: red;
  }

  #result {
    color: rgb(0, 255, 0);
  }

JavaScript

script.js 文件管理转换逻辑、输入验证和更新 DOM。这是一个片段：

const inputEl = document.getElementById("input");
const errorEl = document.getElementById("error");
const resultEl = document.getElementById("result");
let errorTime;
let resultTime;

function updateResults() {
  if (inputEl.value 2d1b547ac038f694c7ef60a480b9dfa0 {
      errorEl.innerText = "";
      inputEl.value = "";
    }, 2000);
  } else {
    resultEl.innerText = (+inputEl.value / 2.2).toFixed(2);
    clearTimeout(resultTime);
    resultTime = setTimeout(() => {
      resultEl.innerText = "";
      inputEl.value = "";
    }, 10000);
  }
}

inputEl.addEventListener("input", updateResults);

现场演示

您可以在此处查看重量转换器的现场演示。

结论

构建这个权重转换器是一个令人愉快的项目，它让我能够探索 JavaScript 在处理实时输入验证和计算方面的潜力。我希望这个项目能够激励您创建类似的工具，使日常任务变得更加轻松。请随意探索、定制和改进代码以满足您的需求。快乐编码！

制作人员

这个项目是作为 JavaScript 的实际应用程序开发的，用于用户输入处理和 DOM 操作。

作者

• 阿布舍克·古贾尔
  • GitHub 简介

以上是建立一个体重转换器网站的详细内容。更多信息请关注PHP中文网其他相关文章！