数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 HTML、CSS 和 JavaScript 创建二进制计算器？
二进制计算器是一个对二进制数进行数学运算的程序。现在，如果您还记得，二进制数是由两个数字（即 0 和 1）组成的数字。在本博文中，我们将使用此程序来计算二进制数的加法、减法、乘法和除法。这将是一个基本的计算器，它将使用 HTML、CSS 和 JavaScript 的基本概念来执行相同的操作。因此，让我们从 HTML 结构开始。
HTML 结构
首先，我们将创建一个表单，该表单将被划分为表格行，提供诸如添加 1、添加 0、清除显示以及加号、减号、乘号和除号按钮以及等于号等功能。
<form>
<table>
<tr>
<td colspan="4">
<input type="text" id="display" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="addToDisplay(1)" />
</td>
<td>
<input type="button" value="0" onclick="addToDisplay(0)" />
</td>
<td>
<input type="button" value="C" onclick="clearDisplay()" />
</td>
<td>
<input type="button" value="+" onclick="addToDisplay('+')" />
</td>
<td>
<input type="button" value="-" onclick="addToDisplay('-')" />
</td>
<td>
<input type="button" value="*" onclick="addToDisplay('*')" />
</td>
<td>
<input type="button" value="/" onclick="addToDisplay('/')" />
</td>
<td>
<input type="button" value="=" onclick="calculate()" />
</td>
</tr>
<tr>
<td colspan="4">
Equivalent Decimal is:
<p id="toDecimal"></p>
</td>
</tr>
<tr>
<td colspan="4">
<p id="previousCalculation"></p>
</td>
</tr>
<!-- more buttons for the other operations -->
</table>
</form>
如您所见，我们有一个 ID 为“display”的输入字段，该字段被禁用。此字段将用于显示输入和计算结果。我们还有一组用于不同二进制数字（0 和 1）和不同数学运算（+、-、*、/）的按钮。每个按钮都有一个 onclick 属性，当单击时会触发一个 JavaScript 函数。
CSS 样式
接下来，我们将添加一些 CSS 样式，使我们的计算器看起来更美观。
<style>
/* Center the calculator on the page */
table {
margin: 0 auto;
padding: 20px;
}
/* Style the display */
#display {
background-color: #f2f2f2; /* gray */
text-align: right;
padding: 12px 20px;
font-size: 20px;
border: none;
width: 100%;
}
/* Add some spacing between the buttons */
input[type="button"] {
margin: 5px;
}
/* Give the buttons a consistent size and appearance */
input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
background-color: #f2f2f2;
border: none;
cursor: pointer;
}
#toDecimal {
font-size: 30px;
}
/* Add hover effect to the buttons */
input[type="button"]:hover {
background-color: #e6e6e6;
}
/* Add a different style for the operator buttons */
input[type="button"][value="+"],
input[type="button"][value="-"],
input[type="button"][value="*"],
input[type="button"][value="/"] {
background-color: #4caf50;
color: white;
}
/* Add a different style for the clear button */
input[type="button"][value="C"] {
background-color: #f44336;
color: white;
}
/* Add a different style for the equal button */
input[type="button"][value="="] {
background-color: #2196f3;
color: white;
}
</style>
JavaScript 功能
最后，我们将向计算器添加 JavaScript 功能。
<script>
function addToDisplay(val) {
var display = document.getElementById("display");
display.value += val;
}
function clearDisplay() {
var display = document.getElementById("display");
display.value = "";
document.getElementById("toDecimal").innerHTML = "";
}
function calculate() {
var display = document.getElementById("display");
var result = eval(display.value);
display.value = result;
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
function calculate() {
var display = document.getElementById("display");
var input = display.value;
var result;
//splitting the input by operator
var numbers = input.split(/[+\-*/]/);
var operator = input.replace(numbers[0], "").replace(numbers[1], "");
//converting strings to binary
var num1 = parseInt(numbers[0], 2);
var num2 = parseInt(numbers[1], 2);
//checking the operator and performing the corresponding operation
switch (operator) {
case "+":
result = (num1 + num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "-":
result = (num1 - num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "*":
result = (num1 * num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "/":
result = (num1 / num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
default:
result = "Invalid operator";
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
display.value = result;
}
</script>
将以上所有代码组合到 index.html 文件中
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
/* Center the calculator on the page */
table {
margin: 0 auto;
padding: 20px;
}
/* Style the display */
#display {
background-color: #f2f2f2; /* gray */
text-align: right;
padding: 12px 20px;
font-size: 20px;
border: none;
width: 100%;
}
/* Add some spacing between the buttons */
input[type="button"] {
margin: 5px;
}
/* Give the buttons a consistent size and appearance */
input[type="button"] {
width: 50px;
height: 50px;
font-size: 18px;
background-color: #f2f2f2;
border: none;
cursor: pointer;
}
#toDecimal {
font-size: 30px;
}
/* Add hover effect to the buttons */
input[type="button"]:hover {
background-color: #e6e6e6;
}
/* Add a different style for the operator buttons */
input[type="button"][value="+"],
input[type="button"][value="-"],
input[type="button"][value="*"],
input[type="button"][value="/"] {
background-color: #4caf50;
color: white;
}
/* Add a different style for the clear button */
input[type="button"][value="C"] {
background-color: #f44336;
color: white;
}
/* Add a different style for the equal button */
input[type="button"][value="="] {
background-color: #2196f3;
color: white;
}
</style>
</head>
<body>
<form>
<table>
<tr>
<td colspan="4">
<input type="text" id="display" disabled />
</td>
</tr>
<tr>
<td>
<input type="button" value="1" onclick="addToDisplay(1)" />
</td>
<td>
<input type="button" value="0" onclick="addToDisplay(0)" />
</td>
<td>
<input type="button" value="C" onclick="clearDisplay()" />
</td>
<td>
<input type="button" value="+" onclick="addToDisplay('+')" />
</td>
<td>
<input type="button" value="-" onclick="addToDisplay('-')" />
</td>
<td>
<input type="button" value="*" onclick="addToDisplay('*')" />
</td>
<td>
<input type="button" value="/" onclick="addToDisplay('/')" />
</td>
<td>
<input type="button" value="=" onclick="calculate()" />
</td>
</tr>
<tr>
<td colspan="4">
Equivalent Decimal is:
<p id="toDecimal"></p>
</td>
</tr>
<tr>
<td colspan="4">
<p id="previousCalculation"></p>
</td>
</tr>
<!-- more buttons for the other operations -->
</table>
</form>
<script>
function addToDisplay(val) {
var display = document.getElementById("display");
display.value += val;
}
function clearDisplay() {
var display = document.getElementById("display");
display.value = "";
document.getElementById("toDecimal").innerHTML = "";
}
function calculate() {
var display = document.getElementById("display");
var result = eval(display.value);
display.value = result;
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
function calculate() {
var display = document.getElementById("display");
var input = display.value;
var result;
//splitting the input by operator
var numbers = input.split(/[+\-*/]/);
var operator = input.replace(numbers[0], "").replace(numbers[1], "");
//converting strings to binary
var num1 = parseInt(numbers[0], 2);
var num2 = parseInt(numbers[1], 2);
//checking the operator and performing the corresponding operation
switch (operator) {
case "+":
result = (num1 + num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "-":
result = (num1 - num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "*":
result = (num1 * num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
case "/":
result = (num1 / num2).toString(2);
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
break;
default:
result = "Invalid operator";
var decimalNumber = parseInt(result, 2);
document.getElementById("toDecimal").innerHTML = decimalNumber;
}
display.value = result;
localStorage.setItem("previousCalculation", input + " = " + result);
var previousCalculation = localStorage.getItem("previousCalculation");
document.getElementById("previousCalculation").innerHTML = previousCalculation;
}
</script>
</body>
</html>
在本教程中，我们学习了如何使用 HTML、CSS 和 JavaScript 创建二进制计算器。我们了解了如何设置 HTML 结构、添加 CSS 样式和 JavaScript 功能以创建可工作的计算器。您可以根据需要添加更多功能，例如处理错误情况和添加更多操作。此项目可以帮助您了解不同的语言如何协同工作以创建动态且交互式的 Web 应用程序。
更新于：2023 年 2 月 21 日
1K+ 次浏览
广告