js实现简单计算器
实现基础功能
创建一个HTML文件，包含数字按钮、运算符按钮和显示结果的输入框。基本结构如下：
<!DOCTYPE html>
<html>
<head>
<title>简易计算器</title>
<style>
#calculator {
width: 200px;
margin: 0 auto;
text-align: center;
}
button {
width: 40px;
height: 40px;
margin: 5px;
}
#result {
width: 180px;
height: 40px;
margin-bottom: 10px;
text-align: right;
}
</style>
</head>
<body>
<div id="calculator">
<input type="text" id="result" readonly>
<button onclick="appendToResult('7')">7</button>
<button onclick="appendToResult('8')">8</button>
<button onclick="appendToResult('9')">9</button>
<button onclick="appendToResult('/')">/</button>
<button onclick="appendToResult('4')">4</button>
<button onclick="appendToResult('5')">5</button>
<button onclick="appendToResult('6')">6</button>
<button onclick="appendToResult('*')">*</button>
<button onclick="appendToResult('1')">1</button>
<button onclick="appendToResult('2')">2</button>
<button onclick="appendToResult('3')">3</button>
<button onclick="appendToResult('-')">-</button>
<button onclick="appendToResult('0')">0</button>
<button onclick="appendToResult('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToResult('+')">+</button>
<button onclick="clearResult()">C</button>
</div>
<script src="calculator.js"></script>
</body>
</html>JavaScript逻辑实现
创建calculator.js文件，实现计算器核心功能：
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 backspace() {
currentInput = currentInput.slice(0, -1);
document.getElementById('result').value = currentInput;
}
// 添加键盘支持
document.addEventListener('keydown', function(event) {
const key = event.key;
if (/[0-9+\-*/.=]/.test(key)) {
if (key === '=' || key === 'Enter') {
calculate();
} else {
appendToResult(key);
}
} else if (key === 'Backspace') {
backspace();
} else if (key === 'Escape') {
clearResult();
}
});安全改进
使用更安全的计算方式替代eval：
function safeCalculate() {
try {
// 使用Function构造函数比eval更安全
const result = new Function('return ' + currentInput)();
if (isNaN(result) || !isFinite(result)) {
throw new Error('Invalid calculation');
}
document.getElementById('result').value = result;
currentInput = result.toString();
} catch (error) {
document.getElementById('result').value = 'Error';
currentInput = '';
}
}完整代码整合
将上述改进整合到最终版本：
let currentInput = '';
function appendToResult(value) {
currentInput += value;
document.getElementById('result').value = currentInput;
}
function clearResult() {
currentInput = '';
document.getElementById('result').value = '';
}
function backspace() {
currentInput = currentInput.slice(0, -1);
document.getElementById('result').value = currentInput;
}
function calculate() {
try {
const result = new Function('return ' + currentInput)();
if (isNaN(result) || !isFinite(result)) {
throw new Error('Invalid calculation');
}
document.getElementById('result').value = result;
currentInput = result.toString();
} catch (error) {
document.getElementById('result').value = 'Error';
currentInput = '';
}
}
document.addEventListener('keydown', function(event) {
const key = event.key;
if (/[0-9+\-*/.=]/.test(key)) {
event.preventDefault();
if (key === '=' || key === 'Enter') {
calculate();
} else {
appendToResult(key);
}
} else if (key === 'Backspace') {
event.preventDefault();
backspace();
} else if (key === 'Escape') {
event.preventDefault();
clearResult();
}
});这个实现包含了基础计算功能、键盘支持、错误处理和基本样式，可以根据需要进一步扩展功能或改进界面设计。
