在线计算器js实现
实现基础计算器功能
创建一个简单的HTML文件，包含数字按钮、运算符按钮和显示区域。使用JavaScript处理按钮点击事件并执行计算。
<!DOCTYPE html>
<html>
<head>
<title>在线计算器</title>
<style>
.calculator {
width: 200px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
#display {
width: 100%;
height: 40px;
margin-bottom: 10px;
text-align: right;
font-size: 20px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 5px;
}
button {
height: 40px;
font-size: 18px;
}
</style>
</head>
<body>
<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="appendToDisplay('4')">4</button>
<button onclick="appendToDisplay('5')">5</button>
<button onclick="appendToDisplay('6')">6</button>
<button onclick="appendToDisplay('*')">*</button>
<button onclick="appendToDisplay('1')">1</button>
<button onclick="appendToDisplay('2')">2</button>
<button onclick="appendToDisplay('3')">3</button>
<button onclick="appendToDisplay('-')">-</button>
<button onclick="appendToDisplay('0')">0</button>
<button onclick="appendToDisplay('.')">.</button>
<button onclick="calculate()">=</button>
<button onclick="appendToDisplay('+')">+</button>
<button onclick="clearDisplay()">C</button>
</div>
</div>
<script>
function appendToDisplay(value) {
document.getElementById('display').value += value;
}
function clearDisplay() {
document.getElementById('display').value = '';
}
function calculate() {
try {
const result = eval(document.getElementById('display').value);
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}
</script>
</body>
</html>增强计算器安全性
使用eval函数存在安全风险，可以替换为更安全的解析方式。创建一个函数来解析数学表达式。
function calculate() {
const expression = document.getElementById('display').value;
try {
const tokens = expression.match(/(\d+\.?\d*)|([+\-*/])/g);
if (!tokens) return;
let result = parseFloat(tokens[0]);
for (let i = 1; i < tokens.length; i += 2) {
const operator = tokens[i];
const operand = parseFloat(tokens[i+1]);
switch (operator) {
case '+': result += operand; break;
case '-': result -= operand; break;
case '*': result *= operand; break;
case '/': result /= operand; break;
default: throw new Error('Invalid operator');
}
}
document.getElementById('display').value = result;
} catch (error) {
document.getElementById('display').value = 'Error';
}
}添加高级计算功能
扩展计算器功能，支持平方根、幂运算等高级功能。
<button onclick="squareRoot()">√</button>
<button onclick="power()">^</button>
<button onclick="percentage()">%</button>
<script>
function squareRoot() {
const value = parseFloat(document.getElementById('display').value);
if (value >= 0) {
document.getElementById('display').value = Math.sqrt(value);
} else {
document.getElementById('display').value = 'Error';
}
}
function power() {
document.getElementById('display').value += '';
}
function percentage() {
const value = parseFloat(document.getElementById('display').value);
document.getElementById('display').value = value / 100;
}
</script>支持键盘输入
添加事件监听器，允许用户通过键盘输入数字和运算符。
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 === 'Escape') {
clearDisplay();
} else if (event.key === 'Backspace') {
const display = document.getElementById('display');
display.value = display.value.slice(0, -1);
}
});添加记忆功能
实现记忆存储和读取功能，增强用户体验。
<button onclick="memoryStore()">MS</button>
<button onclick="memoryRecall()">MR</button>
<button onclick="memoryClear()">MC</button>
<script>
let memory = 0;
function memoryStore() {
const value = document.getElementById('display').value;
if (value && !isNaN(value)) {
memory = parseFloat(value);
}
}
function memoryRecall() {
document.getElementById('display').value = memory;
}
function memoryClear() {
memory = 0;
}
</script>处理连续运算
改进计算逻辑，支持连续运算而不需要每次都按等号。
let lastOperation = null;
let firstOperand = null;
function handleOperation(operation) {
const currentValue = parseFloat(document.getElementById('display').value);
if (firstOperand === null) {
firstOperand = currentValue;
} else if (lastOperation) {
firstOperand = performCalculation(firstOperand, currentValue, lastOperation);
document.getElementById('display').value = firstOperand;
}
lastOperation = operation;
document.getElementById('display').value = '';
}
function performCalculation(a, b, op) {
switch (op) {
case '+': return a + b;
case '-': return a - b;
case '*': return a * b;
case '/': return a / b;
default: return b;
}
}
function calculate() {
const currentValue = parseFloat(document.getElementById('display').value);
if (firstOperand !== null && lastOperation) {
const result = performCalculation(firstOperand, currentValue, lastOperation);
document.getElementById('display').value = result;
firstOperand = result;
lastOperation = null;
}
}
