HTML计算器程序：键盘输入支持，图形界面美观
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='calculator'>
<input type='text' id='input' readonly>
<div class='buttons'>
<button onclick='clearInput()'>C</button>
<button onclick='deleteCharacter()'>←</button>
<button onclick='appendCharacter('/')'>/</button>
<button onclick='appendCharacter('7')'>7</button>
<button onclick='appendCharacter('8')'>8</button>
<button onclick='appendCharacter('9')'>9</button>
<button onclick='appendCharacter('*')'>*</button>
<button onclick='appendCharacter('4')'>4</button>
<button onclick='appendCharacter('5')'>5</button>
<button onclick='appendCharacter('6')'>6</button>
<button onclick='appendCharacter('-')'>-</button>
<button onclick='appendCharacter('1')'>1</button>
<button onclick='appendCharacter('2')'>2</button>
<button onclick='appendCharacter('3')'>3</button>
<button onclick='appendCharacter('+')'>+</button>
<button onclick='appendCharacter('0')'>0</button>
<button onclick='appendCharacter('.')'>.</button>
<button onclick='calculate()'>=</button>
</div>
</div>
<script src='script.js'></script>
</body>
</html>
<pre><code class="language-css">.calculator {
width: 200px;
margin: 0 auto;
padding: 20px;
background-color: #f2f2f2;
border-radius: 5px;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
margin-top: 10px;
}
button {
width: 40px;
height: 40px;
border-radius: 5px;
background-color: #e0e0e0;
border: none;
cursor: pointer;
}
input {
width: 100%;
height: 40px;
margin-bottom: 10px;
padding: 5px;
font-size: 16px;
text-align: right;
}
</code></pre>
<pre><code class="language-javascript">let input = document.getElementById('input');
function appendCharacter(character) {
input.value += character;
}
function deleteCharacter() {
input.value = input.value.slice(0, -1);
}
function clearInput() {
input.value = '';
}
function calculate() {
try {
input.value = eval(input.value);
} catch (error) {
input.value = '错误';
}
}
document.addEventListener('keydown', function(event) {
let key = event.key;
switch (key) {
case '0':
case '1':
case '2':
case '3':
case '4':
case '5':
case '6':
case '7':
case '8':
case '9':
case '+':
case '-':
case '*':
case '/':
case '.':
appendCharacter(key);
break;
case 'Enter':
calculate();
break;
case 'Backspace':
deleteCharacter();
break;
case 'Delete':
clearInput();
break;
}
});
</code></pre>
<p>将上述代码保存为三个文件（例如<code>calculator.html</code>、<code>style.css</code>和<code>script.js</code>），并在浏览器中打开<code>calculator.html</code>即可看到计算器程序。可以使用鼠标点击按钮进行输入，也可以使用键盘小键盘进行输入和操作。希望对你有帮助！</p>
原文地址: https://www.cveoy.top/t/topic/p53f 著作权归作者所有。请勿转载和采集!