二进制计算器是一种对二进制数进行数学计算的程序。现在，您还记得二进制数是仅由两个数字（即 0 和 1）组成的数字。在本博客中，我们将使用此程序来计算二进制数的加法、减法、乘法和除法。这将是一个基本的计算器，将使用 HTML、CSS 和 JavaScript 的基本概念来执行相同的操作。那么，让我们开始了解 HTML 结构。
HTML 结构
首先，我们将制作一个表格，该表格将分为表格行，提供诸如加1，加0，清除加，减，乘和除号等号的显示和按钮等功能。
| Equivalent Decimal is: | |||||||
如您所见，我们有一个 ID 为“display”的输入字段已被禁用。该字段将用于显示输入和计算结果。我们还有一组用于不同二进制数字（0 和 1）和不同数学运算（+、-、*、/）的按钮。每个按钮都有一个 onclick 属性，单击时会触发 JavaScript 函数。
CSS 样式
接下来，我们将添加一些 CSS 样式以使我们的计算器看起来更美观。
算家云
高效、便捷的人工智能算力服务平台
37 查看详情
立即学习“Java免费学习笔记（深入）”；
/* 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; }
JavaScript 功能
最后，我们将向计算器添加 JavaScript 功能。
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; }
将以上所有代码合并到index.html文件中
Calculator /* 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; }
| Equivalent Decimal is: | |||||||
在本教程中，我们学习了如何使用 HTML、CSS 和 JavaScript 创建二进制计算器。我们已经了解了如何设置 HTML 结构、添加 CSS 样式和 JavaScript 功能来创建一个可用的计算器。您可以添加更多功能，例如处理错误情况并根据您的要求添加更多操作。该项目可以帮助您了解不同语言如何协同工作来创建动态的交互式 Web 应用程序。
以上就是如何使用 HTML、CSS 和 JavaScript 创建二进制计算器？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/531399.html
微信扫一扫 
支付宝扫一扫 
