📅 最后修改于: 2023-12-03 14:51:54.258000 🧑 作者: Mango
二进制计算器可以进行二进制的加、减、乘、除等基本运算。本文将介绍如何使用 HTML、CSS 和 JavaScript 创建一个简单的二进制计算器。
HTML 是网页的基础语言，我们可以使用 HTML 定义页面布局和结构。
下面是一个简单的 HTML 页面结构：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二进制计算器</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>二进制计算器</h1>
<form>
<input type="text" id="num1" placeholder="请输入第一个二进制数">
<select id="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type="text" id="num2" placeholder="请输入第二个二进制数">
<button type="button" onclick="calculate()">计算</button>
<input type="text" id="result" placeholder="计算结果" readonly>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
我们通过 <input> 标签来让用户输入二进制数和运算符，通过 <button> 标签和 onclick 属性来触发计算函数，通过 <input type="text" readonly> 标签来显示计算结果。需要注意的是，JavaScript 函数将在后面介绍。
CSS 可以让我们对页面进行美化和布局。
下面是一个简单的 CSS 页面样式：
.container {
width: 50%;
margin: 0 auto;
text-align: center;
}
h1 {
font-size: 32px;
margin-top: 50px;
}
input[type="text"], select {
width: 100%;
height: 40px;
font-size: 24px;
margin-bottom: 20px;
}
button {
width: 100%;
height: 40px;
font-size: 24px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 4px;
margin-bottom: 20px;
}
#result {
background-color: #f5f5f5;
font-size: 24px;
}
我们使用 margin 属性和 text-align 属性来让页面居中显示。我们使用 font-size 属性来设置字体大小，使用 background-color 属性来设置背景颜色，使用 border 属性来设置边框，使用 border-radius 属性来设置圆角边框。
JavaScript 可以让我们实现计算功能。
下面是一个简单的 JavaScript 计算函数：
function calculate() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var operator = document.getElementById("operator").value;
var result = "";
if (num1.match(/^[01]+$/) && num2.match(/^[01]+$/)) {
num1 = parseInt(num1, 2);
num2 = parseInt(num2, 2);
switch (operator) {
case "+":
result = (num1 + num2).toString(2);
break;
case "-":
result = (num1 - num2).toString(2);
break;
case "*":
result = (num1 * num2).toString(2);
break;
case "/":
result = Math.floor(num1 / num2).toString(2);
break;
}
document.getElementById("result").value = result;
} else {
alert("请输入正确的二进制数！");
}
}
我们使用 document.getElementById() 方法来获取用户输入的二进制数和运算符。我们使用正则表达式来判断用户输入是否正确，使用 parseInt() 方法将二进制数转换为十进制数进行计算，使用 toString() 方法将十进制数转换为二进制数进行显示。我们使用 alert() 方法来弹出提示窗口。
本文介绍了如何使用 HTML、CSS 和 JavaScript 创建一个简单的二进制计算器。需要注意的是，本文的代码仅适用于二进制数的加、减、乘、除等基本运算，对于进制转换等高级功能需要进一步改进。