简易计算器网页开发教程：HTML、JavaScript实现加减乘除运算

本教程将指导您使用 HTML 和 JavaScript 开发一个简单的计算器网页，它包含两个文本框用于输入数据，四个按钮用于执行加减乘除运算，以及一个文本框显示计算结果。

a) HTML 代码

<!DOCTYPE html>
<html>
<head>
	<title>简易计算器</title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="calculator.js"></script>
</head>
<body>
	<label>第一个数：</label>
	<input type="text" id="num1"><br>
	<label>第二个数：</label>
	<input type="text" id="num2"><br>
	<button onclick="add()">加</button>
	<button onclick="sub()">减</button>
	<button onclick="mul()">乘</button>
	<button onclick="div()">除</button><br>
	<label>结果：</label>
	<input type="text" id="result" disabled>
</body>
</html>

b) JavaScript 代码 (calc() 函数)

function calc() {
    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 (operator) {
        case '+':
            result = add(num1, num2);
            break;
        case '-':
            result = sub(num1, num2);
            break;
        case '*':
            result = mul(num1, num2);
            break;
        case '/':
            result = div(num1, num2);
            break;
        default:
            alert('请选择运算符！');
            return;
    }
    document.getElementById("result").value = result;
}

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

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

// 减法
function sub(num1, num2) {
    return num1 - num2;
}

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

// 除法
function div(num1, num2) {
    if (num2 == 0) {
        alert('除数不能为0！');
        return;
    }
    return num1 / num2;
}

注意：

operator 变量需要在代码中定义，用于存储当前选择的运算符。
在实际开发中，还需要处理用户输入的异常情况，例如输入非数字字符等。

通过以上步骤，您就可以完成一个简单的计算器网页的开发。您可以根据自己的需求进行扩展，例如添加更多运算功能、完善界面设计等。