厘米到英寸 - Javascript (1)

📌 相关文章

📜 厘米到英寸 - Javascript (1)

📅 最后修改于: 2023-12-03 15:07:22.353000 🧑 作者: Mango

厘米到英寸 - JavaScript

本文将向你介绍如何用 JavaScript 编写一个简单的厘米到英寸转换计算器。

转换公式

厘米到英寸的转换公式是：

1 厘米 = 0.393701 英寸

因此，我们需要将输入值（厘米）乘以此转换因子来获得相应的英寸值。

用户界面

我们将使用 HTML 和 CSS 创建一个简单的用户界面，其中包含一个文本框和一个按钮，用户可以输入数字表示要转换的厘米数，然后单击按钮以完成转换。

<div>
  <label for="cm-input">厘米数：</label>
  <input type="number" id="cm-input">
  <button id="convert-button">转换</button>
</div>
<div id="result-container"></div>

JavaScript 代码

我们将使用 JavaScript 创建转换功能。它将获取用户输入并将其乘以转换因子来计算等效的英寸值。然后，我们将结果显示在页面上。

const convertButton = document.getElementById('convert-button');
const resultContainer = document.getElementById('result-container');
const cmToInch = 0.393701;

convertButton.addEventListener('click', () => {
  const cmInput = document.getElementById('cm-input').value;
  const inchResult = cmInput * cmToInch;
  resultContainer.innerHTML = `${cmInput} 厘米 = ${inchResult.toFixed(2)} 英寸`;
});

完整代码

<!DOCTYPE html>
<html>
  <head>
    <title>厘米到英寸转换器</title>
    <style>
      label {
        display: inline-block;
        width: 80px;
        text-align: right;
        margin-right: 10px;
      }
      input[type=number] {
        width: 100px;
      }
    </style>
  </head>
  <body>
    <div>
      <label for="cm-input">厘米数：</label>
      <input type="number" id="cm-input">
      <button id="convert-button">转换</button>
    </div>
    <div id="result-container"></div>

    <script>
      const convertButton = document.getElementById('convert-button');
      const resultContainer = document.getElementById('result-container');
      const cmToInch = 0.393701;

      convertButton.addEventListener('click', () => {
        const cmInput = document.getElementById('cm-input').value;
        const inchResult = cmInput * cmToInch;
        resultContainer.innerHTML = `${cmInput} 厘米 = ${inchResult.toFixed(2)} 英寸`;
      });
    </script>
  </body>
</html>

以上是一个简单的 JavaScript 厘米到英寸转换器的示例。这个特定的代码段使用 HTML 和 CSS 创建了一个简单的界面，以便用户可以输入要转换的厘米数。JavaScript 然后采用转换公式将其转换为英寸，并将转换结果显示在页面上。