使用JavaScript程序制作简单的计算器(1)

📌 相关文章

📜 使用JavaScript程序制作简单的计算器(1)

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

使用JavaScript程序制作简单的计算器

如果你想学习如何使用JavaScript编写一个简单的计算器，那么你来对地方了！在本文中，我们将介绍如何使用HTML和JavaScript编写一个简单的计算器。

HTML结构

首先，我们需要定义计算器的HTML结构。我们将使用HTML表单元素来定义计算器UI，并使用JavaScript将其连接到计算逻辑。下面是我们使用的基本HTML结构：

<!DOCTYPE html>
<html>
<head>
  <title>计算器</title>
</head>
<body>
  <form>
    <input type="text" name="result" id="result" disabled>
    <br>
    <button type="button" value="1" onclick="addToInputValue(this)">1</button>
    <button type="button" value="2" onclick="addToInputValue(this)">2</button>
    <button type="button" value="3" onclick="addToInputValue(this)">3</button>
    <br>
    <button type="button" value="4" onclick="addToInputValue(this)">4</button>
    <button type="button" value="5" onclick="addToInputValue(this)">5</button>
    <button type="button" value="6" onclick="addToInputValue(this)">6</button>
    <br>
    <button type="button" value="7" onclick="addToInputValue(this)">7</button>
    <button type="button" value="8" onclick="addToInputValue(this)">8</button>
    <button type="button" value="9" onclick="addToInputValue(this)">9</button>
    <br>
    <button type="button" value="+" onclick="addToInputValue(this)">+</button>
    <button type="button" value="0" onclick="addToInputValue(this)">0</button>
    <button type="button" value="-" onclick="addToInputValue(this)">-</button>
    <br>
    <button type="button" value="*" onclick="addToInputValue(this)">*</button>
    <button type="button" value="." onclick="addToInputValue(this)">.</button>
    <button type="button" value="/" onclick="addToInputValue(this)">/</button>
    <br>
    <button type="button" value="C" onclick="clearInput()">C</button>
    <button type="button" value="=" onclick="calculate()">=</button>
  </form>
</body>
</html>

在这个HTML结构中，我们使用了一个表单元素来包含所有的按钮。我们使用button元素定义每个按钮，每个按钮都有一个与之相关联的值。我们还定义了一个输入框来显示计算结果。

JavaScript逻辑

现在，我们需要添加JavaScript代码，将我们的UI与计算逻辑连接起来。下面是我们的JavaScript代码：

// 获取UI元素
const input = document.getElementById('result')

// 添加数字或运算符
function addToInputValue(btn) {
  input.value += btn.value
}

// 清空输入框
function clearInput() {
  input.value = ''
}

// 计算表达式
function calculate() {
  const expression = input.value

  // 通过正则表达式匹配表达式中的运算符和数字
  const regex = /(\d+|\+|\-|\*|\/)/g
  const matches = expression.match(regex)

  // 计算表达式
  let result = 0
  let operator = '+'

  matches.forEach(match => {
    if (match === '+' || match === '-' || match === '*' || match === '/') {
      operator = match
    } else {
      const number = parseFloat(match)

      switch (operator) {
        case '+':
          result += number
          break
        case '-':
          result -= number
          break
        case '*':
          result *= number
          break
        case '/':
          result /= number
          break
      }
    }
  })

  // 显示计算结果
  input.value = result
}

在这个JavaScript代码中，我们定义了三个函数：addToInputValue()、clearInput()和calculate()。addToInputValue()函数被用来添加数字或运算符。当用户点击任何一个按钮时，该操作会被添加到输入框中。clearInput()函数用来清空输入框。calculate()函数用来计算输入框中的表达式，并将结果显示在输入框中。

总结

现在，我们已经编写了一个简单的计算器程序，你可以在这个基础上继续扩展它，添加更多功能。在这个示例中，我们通过HTML和JavaScript连接了UI和计算逻辑。你可以在你自己的程序中使用这个模板，并根据需要进行自己的修改和改进。祝愿你好运！