js 实现计算器
基础计算器实现
使用 JavaScript 创建一个基础计算器需要处理用户输入、运算逻辑和结果显示。以下是核心实现方法：
HTML 结构
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<!-- 其他数字和操作符按钮 -->
<button onclick="calculate()">=</button>
<button onclick="clearResult()">C</button>
</div>
</div>JavaScript 逻辑
let currentInput = '';
function appendToResult(value) {
currentInput += value;
document.getElementById('result').value = currentInput;
}
function clearResult() {
currentInput = '';
document.getElementById('result').value = '';
}
function calculate() {
try {
const result = eval(currentInput);
document.getElementById('result').value = result;
currentInput = result.toString();
} catch (error) {
document.getElementById('result').value = 'Error';
currentInput = '';
}
}高级计算器功能扩展
对于更复杂的科学计算器，需要引入数学函数库或扩展功能：
三角函数和高级运算
function sin() {
currentInput = Math.sin(parseFloat(currentInput)).toString();
updateDisplay();
}
function log() {
currentInput = Math.log10(parseFloat(currentInput)).toString();
updateDisplay();
}表达式解析替代 eval
function safeEval(expr) {
return Function('"use strict";return (' + expr + ')')();
}键盘事件支持
添加键盘输入支持提升用户体验：
document.addEventListener('keydown', (e) => {
if (/[0-9+\-*/.=]/.test(e.key)) {
if (e.key === '=' || e.key === 'Enter') {
calculate();
} else {
appendToResult(e.key);
}
} else if (e.key === 'Escape') {
clearResult();
}
});注意事项
- 避免直接使用
eval()存在安全风险，生产环境应使用表达式解析库 - 考虑添加输入验证防止非法表达式
- 对于移动端需要优化触控体验
- 添加历史记录功能可提升实用性
完整实现建议使用模块化方式组织代码，将显示逻辑与计算逻辑分离。对于商业项目，可以考虑使用现成的库如 math.js 处理复杂运算。
