js实现计算器代码
以下是一个简单的JavaScript计算器实现代码示例，包含基本运算功能（加、减、乘、除）和清除功能：
HTML结构
<div class="calculator">
<input type="text" id="result" disabled>
<div class="buttons">
<button onclick="clearResult()">C</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button onclick="appendOperator('/')">/</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button onclick="appendOperator('*')">*</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button onclick="appendOperator('-')">-</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendOperator('+')">+</button>
</div>
</div>CSS样式
.calculator {
width: 200px;
margin: 0 auto;
padding: 20px;
background: #f4f4f4;
border-radius: 10px;
}
#result {
width: 100%;
margin-bottom: 10px;
padding: 10px;
font-size: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
button {
padding: 10px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background: #ddd;
}JavaScript逻辑
let currentInput = '';
let previousInput = '';
let operation = null;
function appendValue(value) {
currentInput += value;
document.getElementById('result').value = currentInput;
}
function appendOperator(op) {
if (currentInput === '' && previousInput === '') return;
if (previousInput !== '') {
calculate();
}
operation = op;
previousInput = currentInput;
currentInput = '';
}
function calculate() {
let result;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) return;
switch (operation) {
case '+':
result = prev + current;
break;
case '-':
result = prev - current;
break;
case '*':
result = prev * current;
break;
case '/':
result = prev / current;
break;
default:
return;
}
currentInput = result.toString();
operation = null;
previousInput = '';
document.getElementById('result').value = currentInput;
}
function clearResult() {
currentInput = '';
previousInput = '';
operation = null;
document.getElementById('result').value = '';
}功能扩展建议
为增强计算器功能，可考虑添加以下特性：
- 支持连续运算（如1+2+3）
- 添加退格按钮（删除最后一位）
- 添加百分号计算功能
- 键盘事件支持（允许键盘输入）
- 科学计算功能（平方、开方等）
- 历史记录功能
这个实现使用了基本的DOM操作和事件处理，适合初学者理解JavaScript与HTML的交互原理。实际项目中可能需要更复杂的错误处理和状态管理。
