您好,欢迎访问一九零五行业门户网

如何使用 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 应用程序。
以上就是如何使用 html、css 和 javascript 创建二进制计算器?的详细内容。
其它类似信息

推荐信息