JavaScript实现简单计算器：加减乘除运算

本文将带您使用JavaScript编写一个简单的计算器，实现加减乘除四则运算。代码包含HTML页面结构、JavaScript函数实现以及功能说明，帮助您理解基本JavaScript编程和DOM操作。

a) HTML页面

<!DOCTYPE html>
<html>
<head>
	<title>Calculator</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="script.js"></script>
</head>
<body>
	<input type="text" id="num1" placeholder="请输入第一个数">
	<input type="text" id="num2" placeholder="请输入第二个数">
	<br><br>
	<button onclick="calc('+')">加</button>
	<button onclick="calc('-')">减</button>
	<button onclick="calc('*')">乘</button>
	<button onclick="calc('/')">除</button>
	<br><br>
	<input type="text" id="result" placeholder="计算结果">
</body>
</html>

b) JavaScript代码

function calc(operator) {
  var num1 = parseFloat(document.getElementById("num1").value);
  var num2 = parseFloat(document.getElementById("num2").value);
  if (isNaN(num1) || isNaN(num2)) {
    alert('请输入数字！');
    return;
  }
  switch (operator) {
    case '+':
      document.getElementById("result").value = add(num1, num2);
      break;
    case '-':
      document.getElementById("result").value = subtract(num1, num2);
      break;
    case '*':
      document.getElementById("result").value = multiply(num1, num2);
      break;
    case '/':
      if (num2 === 0) {
        alert('除数不能为0！');
        return;
      }
      document.getElementById("result").value = divide(num1, num2);
      break;
    default:
      alert('操作符不合法！');
      break;
  }
}

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

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

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

function divide(num1, num2) {
  return num1 / num2;
}

c) 功能说明

HTML代码创建了两个输入框用于输入数字，四个按钮分别对应加减乘除运算，以及一个显示结果的文本框。
JavaScript代码首先获取用户输入的两个数字，并进行类型转换。
calc()函数根据用户点击的按钮，调用对应的加减乘除函数，并将结果显示在结果文本框中。
代码包含了对输入数据合法性的判断，如非数字输入、除数为零等情况会弹出提示框。
函数add()、subtract()、multiply()、divide()分别实现了加减乘除运算。

通过以上步骤，您就成功地使用JavaScript编写了一个简单的计算器，实现加减乘除四则运算。您可以根据自己的需求进行扩展，添加更多功能，例如百分比计算、平方根等。