AI 生成: 一个简洁美观的网页计算器,支持加、减、乘、除和清除功能,使用纯 HTML/CSS/JavaScript 实现。
This commit is contained in:
@@ -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();
|
||||
Reference in New Issue
Block a user