AI 生成: 一个简洁美观的网页计算器,支持加、减、乘、除和清除功能,使用纯 HTML/CSS/JavaScript 实现。

This commit is contained in:
admin
2026-09-28 20:03:44 +08:00
commit 824623f7ee
4 changed files with 401 additions and 0 deletions
+190
View File
@@ -0,0 +1,190 @@
// ===== 计算器状态 =====
let currentInput = '0'; // 当前输入的数字字符串
let previousValue = null; // 上一个操作数
let currentOperator = null; // 当前运算符
let shouldResetInput = false; // 下次输入是否覆盖当前值
// ===== DOM 元素 =====
const display = document.getElementById('display');
/**
* 更新显示区域
*/
function updateDisplay() {
display.textContent = currentInput;
}
/**
* 输入数字
* @param {string} num
*/
function inputNumber(num) {
if (shouldResetInput) {
currentInput = num;
shouldResetInput = false;
} else {
// 避免出现多个前导 0
currentInput = currentInput === '0' ? num : currentInput + num;
}
updateDisplay();
}
/**
* 输入小数点
*/
function inputDecimal() {
if (shouldResetInput) {
currentInput = '0.';
shouldResetInput = false;
} else if (!currentInput.includes('.')) {
currentInput += '.';
}
updateDisplay();
}
/**
* 执行计算
* @param {number} a
* @param {number} b
* @param {string} op
* @returns {number}
*/
function calculate(a, b, op) {
switch (op) {
case '+': return a + b;
case '-': return a - b;
case '×': return a * b;
case '÷':
if (b === 0) return NaN; // 除零处理
return a / b;
default: return b;
}
}
/**
* 选择运算符
* @param {string} op
*/
function chooseOperator(op) {
const inputValue = parseFloat(currentInput);
// 连续按运算符时,先计算前一步
if (previousValue !== null && currentOperator && !shouldResetInput) {
const result = calculate(previousValue, inputValue, currentOperator);
if (isNaN(result)) {
currentInput = '错误';
previousValue = null;
currentOperator = null;
shouldResetInput = true;
updateDisplay();
return;
}
previousValue = result;
currentInput = formatNumber(result);
} else {
previousValue = inputValue;
}
currentOperator = op;
shouldResetInput = true;
updateDisplay();
}
/**
* 按等号计算结果
*/
function pressEquals() {
if (previousValue === null || currentOperator === null) return;
const inputValue = parseFloat(currentInput);
const result = calculate(previousValue, inputValue, currentOperator);
if (isNaN(result)) {
currentInput = '错误';
} else {
currentInput = formatNumber(result);
}
previousValue = null;
currentOperator = null;
shouldResetInput = true;
updateDisplay();
}
/**
* 清除所有状态
*/
function clearAll() {
currentInput = '0';
previousValue = null;
currentOperator = null;
shouldResetInput = false;
updateDisplay();
}
/**
* 格式化数字,避免过长的小数
* @param {number} num
* @returns {string}
*/
function formatNumber(num) {
if (!isFinite(num)) return '错误';
// 保留最多 10 位有效数字,去掉多余的 0
return parseFloat(num.toPrecision(12)).toString();
}
// ===== 事件绑定 =====
document.querySelector('.keys').addEventListener('click', (e) => {
const btn = e.target.closest('button');
if (!btn) return;
const action = btn.dataset.action;
switch (action) {
case 'number':
inputNumber(btn.dataset.value);
break;
case 'decimal':
inputDecimal();
break;
case 'operator':
chooseOperator(btn.dataset.op);
break;
case 'equals':
pressEquals();
break;
case 'clear':
clearAll();
break;
}
});
// ===== 键盘支持 =====
document.addEventListener('keydown', (e) => {
const key = e.key;
if (/^[0-9]$/.test(key)) {
inputNumber(key);
} else if (key === '.') {
inputDecimal();
} else if (key === '+' || key === '-' || key === '*' || key === '/') {
const map = { '*': '×', '/': '÷', '+': '+', '-': '-' };
chooseOperator(map[key]);
} else if (key === 'Enter' || key === '=') {
e.preventDefault();
pressEquals();
} else if (key === 'Escape' || key.toLowerCase() === 'c') {
clearAll();
} else if (key === 'Backspace') {
// 退格删除
if (currentInput.length > 1 && currentInput !== '错误') {
currentInput = currentInput.slice(0, -1);
} else {
currentInput = '0';
}
updateDisplay();
}
});
// ===== 初始化 =====
updateDisplay();