HTML计算器程序：漂亮界面和键盘输入 - 代码示例 - 常规

<!DOCTYPE html>
<html>
<head>
<title>HTML计算器程序 - 键盘输入</title>
<style>
.calculator {
width: 250px;
margin: 0 auto;
padding: 10px;
background-color: #f2f2f2;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator input {
width: 100%;
margin-bottom: 5px;
padding: 8px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
}
.calculator button {
width: 48%;
margin: 2px;
padding: 10px;
font-size: 18px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="result" readonly>
<table>
<tr>
<td><button onclick="appendValue('7')">7</button></td>
<td><button onclick="appendValue('8')">8</button></td>
<td><button onclick="appendValue('9')">9</button></td>
<td><button onclick="appendValue('/')">/</button></td>
</tr>
<tr>
<td><button onclick="appendValue('4')">4</button></td>
<td><button onclick="appendValue('5')">5</button></td>
<td><button onclick="appendValue('6')">6</button></td>
<td><button onclick="appendValue('*')">*</button></td>
</tr>
<tr>
<td><button onclick="appendValue('1')">1</button></td>
<td><button onclick="appendValue('2')">2</button></td>
<td><button onclick="appendValue('3')">3</button></td>
<td><button onclick="appendValue('-')">-</button></td>
</tr>
<tr>
<td><button onclick="appendValue('0')">0</button></td>
<td><button onclick="appendValue('.')">.</button></td>
<td><button onclick="calculate()">=</button></td>
<td><button onclick="appendValue('+')">+</button></td>
</tr>
</table>
</div>
<script>
function appendValue(value) {
document.getElementById('result').value += value;
}
function calculate() {
var result = document.getElementById('result').value;
var answer = eval(result);
document.getElementById('result').value = answer;
}
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
calculate();
} else if (event.key === 'Escape') {
document.getElementById('result').value = '';
} else if (event.key === '.' || event.key === '/' || event.key === '*' || event.key === '-' || event.key === '+') {
appendValue(event.key);
} else if (!isNaN(event.key)) {
appendValue(event.key);
}
});
</script>
</body>
</html>