1. 前言
二进制计算器是一种经典的计算器形式，主要用于进行二进制数字间的计算。本文将介绍如何使用 HTML、CSS 和 JavaScript 创建二进制计算器。
2. HTML 结构
首先，我们需要创建基本的 HTML 结构，用于显示计算器的各种组件。以下是我们将使用的基本结构：
<div id="calculator">
<input type="text" id="input" disabled>
<div class="keys">
<button class="operator" id="add">+</button>
<button class="operator" id="subtract">-</button>
<button class="operator" id="multiply">*</button>
<button class="operator" id="divide">/</button>
<button id="clear">Clear</button>
<button id="equals">=</button>
<button class="number" id="1">1</button>
<button class="number" id="0">0</button>
</div>
</div>
我们将创建一个包含计算器所需组件的 DIV 元素，并使用内部文本输入域、各种操作符按钮和数字按钮。所有数字按钮都具有 .number 类，而所有操作符按钮都具有 .operator 类。
3. CSS 样式
一旦我们拥有了 HTML 结构，我们将创建一个样式表来应用样式。以下是我们将使用的基本样式：
#calculator {
width: 400px;
margin: 0 auto;
text-align: center;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
}
input[type="text"] {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
background-color: #f8f8f8;
font-size: 20px;
text-align: right;
padding-right: 15px;
}
.keys {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
button {
width: 100px;
height: 50px;
border: none;
border-radius: 5px;
margin: 5px;
font-size: 20px;
color: #fff;
background-color: #007bff;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
button:active {
transform: translateY(2px);
}
.operator {
background-color: #dc3545;
}
.operator:hover {
background-color: #c82333;
}
.operator:active {
transform: translateY(2px);
}
button#clear {
background-color: #6c757d;
}
button#clear:hover {
background-color: #5a6268;
}
button#clear:active {
transform: translateY(2px);
}
button#equals {
background-color: #28a745;
}
button#equals:hover {
background-color: #218838;
}
button#equals:active {
transform: translateY(2px);
}
button.number {
background-color: #343a40;
}
button.number:hover {
background-color: #23272b;
}
button.number:active {
transform: translateY(2px);
}
这些样式将应用于我们所创建的 HTML 结构。我们使用 ID 选择器为计算器 DIV 元素应用一些基本样式，然后使用类选择器来为不同类型的按钮（数字和操作符）定义样式。悬停和活动状态也分别具有不同的样式。
4. JavaScript 代码
现在我们已经创建了 HTML 结构和 CSS 样式，接下来是创建 JavaScript 代码。以下是我们将编写的基本代码：
const input = document.querySelector('#input');
const clearBtn = document.querySelector('#clear');
const keys = document.querySelectorAll('.keys');
const equalsBtn = document.querySelector('#equals');
// add event listeners
for (let i = 0; i < keys.length; i++) {
keys[i].addEventListener('click', () => {
const keyValue = keys[i].getAttribute('id');
updateInput(keyValue);
});
}
clearBtn.addEventListener('click', clearInput);
equalsBtn.addEventListener('click', performCalculation);
// update input field
function updateInput(value) {
input.value += value;
}
// clear input field
function clearInput() {
input.value = '';
}
// perform calculation
function performCalculation() {
const calculation = input.value;
const result = eval(calculation);
input.value = result.toString(2);
}
我们首先获取需要的元素，如输入框、清除按钮、所有按钮和等号按钮。然后，我们向所有按键添加单击事件侦听器。在单击事件中，我们获取按键的值并调用 updateInput() 函数，以将其添加到输入框中。我们还分别向清除按钮和等号按钮添加单击事件侦听器，执行相应的处理程序。
在 updateInput() 函数中，我们接收按键的值，然后将其添加到输入框中。
在 clearInput() 函数中，我们获取输入框，并将其值设置为空。
最后，在 performCalculation() 函数中，我们获取输入框中的计算式，使用 eval() 函数进行求值，并将结果转换为二进制格式。最终结果被设置为输入框的值。
5. 总结
到目前为止，我们已经创建了一个基本的二进制计算器，使用 HTML、CSS 和 JavaScript。
我们使用了基本的 HTML 结构，使用 CSS 样式美化计算器组件，添加了 JavaScript 代码，以响应用户输入并执行计算过程。最终结果以二进制格式输出。
需要注意的是，该计算器有相当大的局限性，只能执行二进制数字之间的计算，并且没有对异常情况的有效处理。
如果您对 HTML、CSS 和 JavaScript 熟练掌握，可以轻松修改和扩展该示例，以创造更多功能强大的计算机。