HTML+JavaScript实现漂亮图形界面计算器，支持键盘小键盘输入
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
}
<pre><code> .calculator {
width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.calculator input[type='button'] {
width: 64px;
height: 64px;
font-size: 20px;
margin: 4px;
border: none;
border-radius: 5px;
background-color: #e0e0e0;
cursor: pointer;
}
.calculator input[type='text'] {
width: 100%;
height: 40px;
font-size: 24px;
margin-bottom: 10px;
text-align: right;
padding: 5px;
}
</style>
</code></pre>
</head>
<body>
<div class='calculator'>
<input type='text' id='result' disabled>
<input type='button' value='7' onclick='appendToResult('7')'>
<input type='button' value='8' onclick='appendToResult('8')'>
<input type='button' value='9' onclick='appendToResult('9')'>
<input type='button' value='/' onclick='appendToResult('/')'>
<br>
<input type='button' value='4' onclick='appendToResult('4')'>
<input type='button' value='5' onclick='appendToResult('5')'>
<input type='button' value='6' onclick='appendToResult('6')'>
<input type='button' value='*' onclick='appendToResult('*')'>
<br>
<input type='button' value='1' onclick='appendToResult('1')'>
<input type='button' value='2' onclick='appendToResult('2')'>
<input type='button' value='3' onclick='appendToResult('3')'>
<input type='button' value='-' onclick='appendToResult('-')'>
<br>
<input type='button' value='0' onclick='appendToResult('0')'>
<input type='button' value='.' onclick='appendToResult('.')'>
<input type='button' value='=' onclick='calculate()'>
<input type='button' value='+' onclick='appendToResult('+')'>
<br>
<input type='button' value='C' onclick='clearResult()'>
</div>
<pre><code><script>
function appendToResult(value) {
document.getElementById('result').value += value;
}
function calculate() {
var result = eval(document.getElementById('result').value);
document.getElementById('result').value = result;
}
function clearResult() {
document.getElementById('result').value = '';
}
document.addEventListener('keydown', function(event) {
if (event.keyCode >= 96 && event.keyCode <= 105) {
// 小键盘数字键
appendToResult(event.keyCode - 96);
} else if (event.keyCode == 106) {
// 小键盘乘号
appendToResult('*');
} else if (event.keyCode == 107) {
// 小键盘加号
appendToResult('+');
} else if (event.keyCode == 109) {
// 小键盘减号
appendToResult('-');
} else if (event.keyCode == 111) {
// 小键盘除号
appendToResult('/');
} else if (event.keyCode == 110 || event.keyCode == 190) {
// 小键盘小数点
appendToResult('.');
} else if (event.keyCode == 13) {
// 小键盘等于号
calculate();
} else if (event.keyCode == 8) {
// Backspace键
var currentValue = document.getElementById('result').value;
document.getElementById('result').value = currentValue.slice(0, -1);
} else if (event.keyCode == 46) {
// Delete键
clearResult();
}
});
</script>
</code></pre>
</body>
</html>
原文地址: https://www.cveoy.top/t/topic/p53b 著作权归作者所有。请勿转载和采集!