JavaScript 简易计算器实现 - 完整代码示例 - 常规

JavaScript 简易计算器实现 - 完整代码示例

本文将使用 JavaScript 实现一个简单的计算器，包含两个输入框用于输入数字，四个按钮分别对应加减乘除运算，以及一个文本框用于显示计算结果。

1. HTML 页面代码

<!DOCTYPE html>
<html>
<head>
  <title>简易计算器</title>
  <meta charset='utf-8'>
  <script type='text/javascript'>
    function calc() {
      // 获取输入的数据
      var num1 = document.getElementById('num1').value;
      var num2 = document.getElementById('num2').value;
      // 判断输入是否合法
      if (isNaN(num1) || isNaN(num2)) {
        alert('请输入数字！');
        return;
      }
      // 转换输入的数据类型
      num1 = parseFloat(num1);
      num2 = parseFloat(num2);
      // 判断点击的按钮，调用对应的函数
      if (document.getElementById('add').checked) {
        document.getElementById('result').value = add(num1, num2);
      } else if (document.getElementById('minus').checked) {
        document.getElementById('result').value = minus(num1, num2);
      } else if (document.getElementById('mul').checked) {
        document.getElementById('result').value = mul(num1, num2);
      } else if (document.getElementById('div').checked) {
        if (num2 == 0) {
          alert('除数不能为 0！');
          return;
        }
        document.getElementById('result').value = div(num1, num2);
      }
    }

    function add(num1, num2) {
      return num1 + num2;
    }

    function minus(num1, num2) {
      return num1 - num2;
    }

    function mul(num1, num2) {
      return num1 * num2;
    }

    function div(num1, num2) {
      return num1 / num2;
    }
  </script>
</head>
<body>
  <h1>简易计算器</h1>
  <label for='num1'>第一个数：</label>
  <input type='text' id='num1'><br><br>
  <label for='num2'>第二个数：</label>
  <input type='text' id='num2'><br><br>
  <input type='radio' id='add' name='operator' value='add'>加
  <input type='radio' id='minus' name='operator' value='minus'>减
  <input type='radio' id='mul' name='operator' value='mul'>乘
  <input type='radio' id='div' name='operator' value='div'>除<br><br>
  <button onclick='calc()'>计算</button><br><br>
  <label for='result'>结果：</label>
  <input type='text' id='result' readonly>
</body>
</html>

2. JavaScript 代码解析

a) calc() 函数

获取并转换输入的数据：通过 document.getElementById() 获取输入框的值，并使用 parseFloat() 将其转换为浮点数。
判断输入是否合法：使用 isNaN() 函数判断输入是否为数字，如果不是，则弹出提示信息并退出。
判断点击的按钮，调用对应的函数：根据选中按钮的值，调用 add()、minus()、mul() 或 div() 函数，并将结果显示在 result 文本框中。
特殊情况处理：在除法运算中，判断除数是否为 0，如果是，则弹出提示信息并退出。

b) add()、minus()、mul()、div() 函数

这四个函数分别实现加减乘除运算，接收两个参数，返回计算结果。

总结

本示例展示了如何使用 JavaScript 实现一个简单的计算器，包含了 HTML 页面结构和 JavaScript 代码解析，希望对您理解 JavaScript 代码和基础逻辑有所帮助。