js计算器的实现
实现基础结构
HTML部分需要创建计算器的基本框架，包含显示区域和按钮。使用<div>容器包裹整个计算器，内部设置一个显示屏和多个按钮。
<div class="calculator">
<input type="text" id="display" readonly>
<div class="buttons">
<button onclick="appendToDisplay('7')">7</button>
<button onclick="appendToDisplay('8')">8</button>
<button onclick="appendToDisplay('9')">9</button>
<button onclick="appendToDisplay('/')">/</button>
<!-- 其他按钮类似 -->
<button onclick="calculate()">=</button>
<button onclick="clearDisplay()">C</button>
</div>
</div>添加CSS样式
通过CSS美化计算器外观，设置按钮布局和显示区域样式。使用Flexbox或Grid布局实现按钮排列。
.calculator {
width: 300px;
margin: 0 auto;
border: 1px solid #ccc;
padding: 20px;
border-radius: 10px;
}
#display {
width: 100%;
height: 50px;
margin-bottom: 20px;
text-align: right;
font-size: 24px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
height: 50px;
font-size: 18px;
border-radius: 5px;
}编写核心JavaScript功能
实现三个主要函数：数字/运算符输入、计算结果和清除显示。使用eval()函数执行计算，但需注意安全性问题。
let display = document.getElementById('display');
function appendToDisplay(value) {
display.value += value;
}
function clearDisplay() {
display.value = '';
}
function calculate() {
try {
display.value = eval(display.value);
} catch (error) {
display.value = 'Error';
}
}增强功能实现
添加退格、百分比等高级功能。通过字符串操作实现退格功能，数学运算实现百分比计算。
function backspace() {
display.value = display.value.slice(0, -1);
}
function percentage() {
display.value = eval(display.value) / 100;
}错误处理与验证
添加输入验证防止非法表达式。检查最后一个字符是否为运算符，避免连续运算符。
function appendToDisplay(value) {
const lastChar = display.value.slice(-1);
if (['+', '-', '*', '/'].includes(lastChar) &&
['+', '-', '*', '/'].includes(value)) {
return;
}
display.value += value;
}键盘事件支持
添加键盘输入支持，监听keydown事件并映射到相应按钮功能。
document.addEventListener('keydown', function(event) {
if (/[0-9+\-*/.=]/.test(event.key)) {
if (event.key === '=' || event.key === 'Enter') {
calculate();
} else {
appendToDisplay(event.key);
}
} else if (event.key === 'Backspace') {
backspace();
} else if (event.key === 'Escape') {
clearDisplay();
}
});替代eval的方案
为提升安全性，可改用Function构造函数或数学表达式解析库替代eval。
function calculate() {
try {
display.value = new Function('return ' + display.value)();
} catch {
display.value = 'Error';
}
}
