如何用JavaScript实现一个简单的计算器

以下是完整的实现：

HTML 结构

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>简单计算器</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="calculator"><div class="display"><input type="text" id="result" readonly></div><div class="buttons"><button class="btn clear" onclick="clearDisplay()">C</button><button class="btn operator" onclick="appendToDisplay('/')">÷</button><button class="btn operator" onclick="appendToDisplay('*')">×</button><button class="btn operator" onclick="backspace()">⌫</button><button class="btn number" onclick="appendToDisplay('7')">7</button><button class="btn number" onclick="appendToDisplay('8')">8</button><button class="btn number" onclick="appendToDisplay('9')">9</button><button class="btn operator" onclick="appendToDisplay('-')">-</button><button class="btn number" onclick="appendToDisplay('4')">4</button><button class="btn number" onclick="appendToDisplay('5')">5</button><button class="btn number" onclick="appendToDisplay('6')">6</button><button class="btn operator" onclick="appendToDisplay('+')">+</button><button class="btn number" onclick="appendToDisplay('1')">1</button><button class="btn number" onclick="appendToDisplay('2')">2</button><button class="btn number" onclick="appendToDisplay('3')">3</button><button class="btn equals" onclick="calculate()" rowspan="2">=</button><button class="btn number zero" onclick="appendToDisplay('0')">0</button><button class="btn number" onclick="appendToDisplay('.')">.</button></div></div><script src="script.js"></script>
</body>
</html>

CSS 样式

* {margin: 0;padding: 0;box-sizing: border-box;
}body {font-family: 'Arial', sans-serif;background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);display: flex;justify-content: center;align-items: center;min-height: 100vh;
}.calculator {background: #2c3e50;border-radius: 20px;padding: 20px;box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);width: 300px;
}.display {margin-bottom: 15px;
}#result {width: 100%;height: 60px;text-align: right;font-size: 24px;padding: 0 15px;border: none;border-radius: 10px;background: #34495e;color: white;outline: none;font-weight: bold;
}.buttons {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 10px;
}.btn {height: 60px;border: none;border-radius: 10px;font-size: 18px;font-weight: bold;cursor: pointer;transition: all 0.2s ease;
}.btn:hover {transform: translateY(-2px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}.btn:active {transform: translateY(0);
}.number {background: #ecf0f1;color: #2c3e50;
}.number:hover {background: #bdc3c7;
}.operator {background: #e67e22;color: white;
}.operator:hover {background: #d35400;
}.clear {background: #e74c3c;color: white;
}.clear:hover {background: #c0392b;
}.equals {background: #27ae60;color: white;grid-row: span 2;
}.equals:hover {background: #229954;
}.zero {grid-column: span 2;
}

JavaScript 逻辑

// 获取显示区域
const result = document.getElementById('result');// 在显示区域添加内容
function appendToDisplay(value) {// 防止连续输入多个小数点if (value === '.' && result.value.includes('.')) {const lastNumber = result.value.split(/[\+\-\*\/]/).pop();if (lastNumber.includes('.')) {return;}}// 防止连续输入多个运算符if (['+', '-', '*', '/'].includes(value)) {const lastChar = result.value.slice(-1);if (['+', '-', '*', '/'].includes(lastChar)) {result.value = result.value.slice(0, -1) + value;return;}}result.value += value;
}// 计算结果
function calculate() {try {if (result.value === '') {return;}// 替换显示符号为JavaScript可识别的符号let expression = result.value.replace(/×/g, '*').replace(/÷/g, '/');// 使用eval计算（注意：在生产环境中应使用更安全的方法）let resultValue = eval（expression);// 保留小数点后两位，如果是整数则显示整数if (Number.isInteger(resultValue)) {result.value = resultValue;} else {result.value = parseFloat(resultValue.toFixed(10));}} catch (error) {result.value = '错误';setTimeout(() => {result.value = '';}, 1500);}
}// 清空显示
function clearDisplay() {result.value = '';
}// 退格删除
function backspace() {result.value = result.value.slice(0, -1);
}// 添加键盘支持
document.addEventListener('keydown', function(event) {const key = event.key;if (key >= '0' && key <= '9' || key === '.') {appendToDisplay(key);} else if (key === '+' || key === '-') {appendToDisplay(key);} else if (key === '*') {appendToDisplay('×');} else if (key === '/') {appendToDisplay('÷');} else if (key === 'Enter' || key === '=') {calculate();} else if (key === 'Backspace') {backspace();} else if (key === 'Escape') {clearDisplay();}
});

高级版本（更安全的计算）

如果你想要更安全的计算方式，可以替换calculate()函数：

function calculate() {try {if (result.value === '') {return;}// 更安全的计算方法let expression = result.value.replace(/×/g, '*').replace(/÷/g, '/');// 简单的表达式解析器const tokens = tokenize(expression);const resultValue = evaluate(tokens);if (Number.isInteger(resultValue)) {result.value = resultValue;} else {result.value = parseFloat(resultValue.toFixed(10));}} catch (error) {result.value = '错误';setTimeout(() => {result.value = '';}, 1500);}
}// 简单的词法分析
function tokenize(expression) {const tokens = [];let current = '';for (let char of expression) {if (char >= '0' && char <= '9' || char === '.') {current += char;} else {if (current) {tokens.push(parseFloat(current));current = '';}tokens.push(char);}}if (current) {tokens.push(parseFloat(current));}return tokens;
}// 简单的表达式求值
function evaluate(tokens) {// 先处理乘除for (let i = 1; i < tokens.length; i += 2) {if (tokens[i] === '*') {tokens[i-1] = tokens[i-1] * tokens[i+1];tokens.splice(i, 2);i -= 2;} else if (tokens[i] === '/') {if (tokens[i+1] === 0) {throw new Error('除零错误');}tokens[i-1] = tokens[i-1] / tokens[i+1];tokens.splice(i, 2);i -= 2;}}// 再处理加减let result = tokens[0];for (let i = 1; i < tokens.length; i += 2) {if (tokens[i] === '+') {result += tokens[i+1];} else if (tokens[i] === '-') {result -= tokens[i+1];}}return result;
}