js实现点击计算器
实现点击计算器的基本结构
使用HTML、CSS和JavaScript创建一个简单的点击计算器。HTML负责结构，CSS负责样式，JavaScript处理逻辑。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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);
gap: 10px;
}
button {
height: 40px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" class="display" disabled>
<div class="buttons">
<button>7</button>
<button>8</button>
<button>9</button>
<button>+</button>
<button>4</button>
<button>5</button>
<button>6</button>
<button>-</button>
<button>1</button>
<button>2</button>
<button>3</button>
<button>*</button>
<button>0</button>
<button>.</button>
<button>=</button>
<button>/</button>
<button>C</button>
</div>
</div>
<script src="calculator.js"></script>
</body>
</html>JavaScript逻辑实现
创建一个calculator.js文件，实现计算器的功能逻辑。
document.addEventListener('DOMContentLoaded', function() {
const display = document.querySelector('.display');
const buttons = document.querySelectorAll('button');
let currentInput = '';
let previousInput = '';
let operation = null;
buttons.forEach(button => {
button.addEventListener('click', function() {
const value = button.textContent;
if (value >= '0' && value <= '9') {
currentInput += value;
display.value = currentInput;
} else if (value === '.') {
if (!currentInput.includes('.')) {
currentInput += value;
display.value = currentInput;
}
} else if (value === 'C') {
currentInput = '';
previousInput = '';
operation = null;
display.value = '';
} else if (value === '=') {
if (previousInput && currentInput && operation) {
currentInput = calculate(previousInput, currentInput, operation);
display.value = currentInput;
previousInput = '';
operation = null;
}
} else {
if (currentInput) {
if (previousInput) {
previousInput = calculate(previousInput, currentInput, operation);
display.value = previousInput;
} else {
previousInput = currentInput;
}
operation = value;
currentInput = '';
}
}
});
});
function calculate(a, b, op) {
a = parseFloat(a);
b = parseFloat(b);
switch (op) {
case '+': return a + b;
case '-': return a - b;
case '*': return a * b;
case '/': return a / b;
default: return b;
}
}
});功能扩展与优化
为计算器添加更多功能，如键盘支持、错误处理等。
document.addEventListener('keydown', function(event) {
const key = event.key;
if (key >= '0' && key <= '9') {
document.querySelector(`button:contains('${key}')`).click();
} else if (key === '.') {
document.querySelector(`button:contains('.')`).click();
} else if (key === '+' || key === '-' || key === '*' || key === '/') {
document.querySelector(`button:contains('${key}')`).click();
} else if (key === 'Enter') {
document.querySelector(`button:contains('=')`).click();
} else if (key === 'Escape') {
document.querySelector(`button:contains('C')`).click();
}
});
function calculate(a, b, op) {
a = parseFloat(a);
b = parseFloat(b);
if (isNaN(a) || isNaN(b)) return '';
switch (op) {
case '+': return (a + b).toString();
case '-': return (a - b).toString();
case '*': return (a * b).toString();
case '/':
if (b === 0) {
alert('除数不能为零');
return '';
}
return (a / b).toString();
default: return b.toString();
}
}注意事项
- 确保HTML中的按钮文本与JavaScript中的判断条件匹配。
- 处理除以零的情况，避免程序崩溃。
- 考虑添加更多运算功能，如百分比、平方根等。
- 可以进一步优化界面，添加响应式设计。
通过以上步骤，可以实现一个功能完整的点击计算器。用户可以通过鼠标点击或键盘输入进行操作，支持基本的四则运算和清除功能。
