简易计算器 - HTML、JavaScript实现加减乘除运算 - 常规

简易计算器 - HTML、JavaScript实现加减乘除运算

本示例演示如何使用HTML和JavaScript代码构建一个简单的计算器，实现加、减、乘、除四则运算。

a) HTML页面代码

<!DOCTYPE html>
<html>
<head>
	<title>简易计算器</title>
	<script type='text/javascript' src='calculator.js'></script>
</head>
<body>
	<h1>简易计算器</h1>
	<label>输入第一个数：</label>
	<input type='text' id='num1'><br><br>
	<label>输入第二个数：</label>
	<input type='text' id='num2'><br><br>
	<button onclick='add()'>加</button>
	<button onclick='subtract()'>减</button>
	<button onclick='multiply()'>乘</button>
	<button onclick='divide()'>除</button><br><br>
	<label>计算结果：</label>
	<input type='text' id='result' readonly>
</body>
</html>

b) JavaScript代码（数据获取、验证及调用运算函数）

function calc() {
  var num1 = parseFloat(document.getElementById('num1').value);
  var num2 = parseFloat(document.getElementById('num2').value);
  if (isNaN(num1) || isNaN(num2)) {
    alert('请输入数字！');
    return;
  }
  add = function() {
    document.getElementById('result').value = num1 + num2;
  }
  subtract = function() {
    document.getElementById('result').value = num1 - num2;
  }
  multiply = function() {
    document.getElementById('result').value = num1 * num2;
  }
  divide = function() {
    if (num2 == 0) {
      alert('除数不能为0！');
      return;
    }
    document.getElementById('result').value = num1 / num2;
  }
}

c) JavaScript代码（加减乘除运算函数）

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) {
  if (num2 == 0) {
    return '除数不能为0！';
  }
  return num1 / num2;
}

总结

该示例展示了一个简单的计算器实现，包括HTML页面结构、JavaScript数据获取、验证和运算函数等。用户可以通过该计算器进行简单的四则运算，并获得计算结果。