1. 定义HTML页面，包含数字按钮、运算符按钮、清除按钮和等号按钮
2. 使用JavaScript编写计算器逻辑，响应按钮的点击事件
3. 在JavaScript中定义变量来存储输入的数字和运算符，以及计算结果
4. 根据用户输入的数字和运算符，计算结果并将其显示在页面上
5. 添加样式使计算器界面更加美观
let num1 = '';
let num2 = '';
let operator = '';
let result = '';
function handleNumberClick(number) {
if (operator === '') {
num1 += number;
updateDisplay(num1);
} else {
num2 += number;
updateDisplay(num2);
}
}
function handleOperatorClick(op) {
operator = op;
}
function handleEqualsClick() {
num1 = parseInt(num1);
num2 = parseInt(num2);
switch (operator) {
case '+':
result = num1 + num2;
break;
case '-':
result = num1 - num2;
break;
case '*':
result = num1 * num2;
break;
case '/':
result = num1 / num2;
break;
}
updateDisplay(result);
}
function updateDisplay(value) {
document.getElementById('display').innerHTML = value;
}
button {
width: 50px;
height: 50px;
font-size: 24px;
background-color: #f2f2f2;
border: none;
border-radius: 5px;
margin: 5px;
cursor: pointer;
}
button:hover {
background-color: #e6e6e6;
}
#display {
width: 250px;
height: 50px;
font-size: 32px;
text-align: right;
background-color: #fff;
border: none;
border-radius: 5px;
margin: 5px;
padding: 5px;
}