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

本示例使用 HTML 和 JavaScript 构建一个简单的计算器，支持加减乘除四则运算，并包含输入验证和错误提示。

a) HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>简单计算器</title>
</head>
<body>
	<input type='text' id='num1' placeholder='请输入数字1'>
	<input type='text' id='num2' placeholder='请输入数字2'>
	<br><br>
	<button onclick='calc('add')'>加</button>
	<button onclick='calc('subtract')'>减</button>
	<button onclick='calc('multiply')'>乘</button>
	<button onclick='calc('divide')'>除</button>
	<br><br>
	<input type='text' id='result' placeholder='计算结果' readonly>
</body>
</html>

b) JavaScript 代码

function calc(operation) {
    var num1 = parseFloat(document.getElementById('num1').value);
    var num2 = parseFloat(document.getElementById('num2').value);
    if (isNaN(num1) || isNaN(num2)) {
        alert('请输入数字');
        return;
    }
    var result = 0;
    switch(operation) {
        case 'add':
            result = add(num1, num2);
            break;
        case 'subtract':
            result = subtract(num1, num2);
            break;
        case 'multiply':
            result = multiply(num1, num2);
            break;
        case 'divide':
            result = divide(num1, num2);
            break;
    }
    document.getElementById('result').value = result;
}

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

c) 四个运算函数已在 b) 中给出。

本示例代码包含以下功能：

使用 HTML 创建输入框、按钮和结果显示框；
使用 JavaScript 获取输入数据，进行类型转换并验证；
根据用户选择的运算符调用相应的运算函数；
将计算结果显示在结果框中；
包含除数为 0 的错误提示。