如何使用HTML，CSS和JavaScript创建 二进制计算器？

HTML或超文本标记语言以及CSS(级联样式表)和JavaScript可用于开发可执行某些功能的交互式用户应用程序。同样, 可以完全使用HTML, CSS和JS开发二进制计算器。

二进制计算器：

• 对二进制数执行算术运算。
• 二进制计算器的缓冲区限制为8位。
• 如果算术运算的结果超过8位, 则多余的位将被截断。
• 算术运算是使用JavaScript函数完成的。

该应用程序包括：

• 一个显示屏, 在该显示屏上可以显示用户输入以及算术运算的结果。
• 两个按钮0和1用于输入。
• +, –, *, /和Calculate按钮用于对输入执行算术运算。 Calculate按钮与JavaScript函数calculate()绑定。
• 单击”计算”按钮时, 将触发compute()函数, 并解析”输出”部分中的HTML。

第一个数字和第二个数字是通过拆分字符串获得的, 最后, 它们使用parseInt()转换为整数。

• parseInt()方法接受两个参数, 第一个参数是要转换为整数的字符串, 第二个参数是基值, 在这种情况下为2或二进制。根据用户选择的加, 减, 乘或除运算符执行算术运算。
• input()函数接收来自用户的输入, 并将其显示在屏幕上。
• backspace()函数删除显示的字符串的最后一个字符。
• cls()函数可清除显示屏。以下代码段实现了二进制计算器。

例子：

1. 用户提供输入后, 输入将保留在HTML格式的”输出”部分中。声明了一个全局变量scr, 所有JavaScript函数都可以访问它。给定任何输入后, 它将存储在scr变量中。
2. 单击”计算”按钮时, 使用indexOf()方法搜索存储在scr变量中的字符串是否存在运算符, 如果找到则返回运算符的索引, 否则返回-1。如果存在运算符, 则存储在scr变量中的字符串将在运算符(+, -, *, /)处拆分, 并将字符串存储到num数组中。
3. 由于输入为字符串格式, 因此必须将其转换为二进制整数格式才能执行计算。使用parseint(str, base)方法解析字符串, 其中str是要转换的字符串, 而base是数字的底数(此处二进制base = 2)。
4. 二进制转换后, 将执行指定的算术运算, 并将结果再次存储在scr变量中并显示在”输出”部分中。

具体实现代码：

     
         
         Binary Calculator
        
         
         
  
         
             .jumbotron {
                 width: 60%;
                 margin: auto;
                 text-align: center;
             }
  
             #output {
                 border: 2px solid black;
                 min-height: 60px;
                 text-align: right;
                 font-weight: bold;
                 font-size: 20px;
             }
  
             .btn {
                 min-width: 120px;
                 border: 2px solid black;
             }
         
     
  
     
         

             

                 Binary Calculator
                 

                 

                     

                         

                             0
                             1
                             AC
                             Backspace
                         
                     
                     

                         

                             +
                             -
                             *
                             /
                         
                     
                     

                         

                             Calculate
                         
                     
                 
             
         
  
         
             var scr = ""; //declared as global variable
  
             function calculate() {
                 if (scr.indexOf("+") != -1) {
                     //If + is present in the string
                     //String obtained from scr is split
                     var num = scr.split("+"); 
                      
                     //The splitted string stores in num array
                     var x = parseInt(num[0], 2); 
                    
                     //The num[0] and num[1] are the two binary 
                     //numbers resp
                     var y = parseInt(num[1], 2); 
                     var sum = x + y;
                     var ans = sum.toString(2);
                 } else if (scr.indexOf("-") != -1) {
                    
                     //If - is present in the string
                     var num = scr.split("-");
                     var x = parseInt(num[0], 2);
                     var y = parseInt(num[1], 2);
                     var sub = x - y;
                     var ans = sub.toString(2);
                 } else if (scr.indexOf("*") != -1) {
                     
                     //If * is present in the string
                     var num = scr.split("*");
                     var x = parseInt(num[0], 2);
                     var y = parseInt(num[1], 2);
                     var mul = x * y;
                     var ans = mul.toString(2);
                 } else if (scr.indexOf("/") != -1) {
                    
                     //If /is present in the string
                     var num = scr.split("/");
                     var x = parseInt(num[0], 2);
                     var y = parseInt(num[1], 2);
                     var div = x /y;
                     var ans = div.toString(2);
                 }
                 scr = ans;
                 document.getElementById("output").innerHTML = scr;
             }
  
             function input(ch) {
                 scr += ch;
                 document.getElementById("output").innerHTML = scr;
             }
  
             function backspace() {
                 var b = document.getElementById("output").innerHTML;
                 scr = b.substring(0, b.length - 1);
                 document.getElementById("output").innerHTML = scr;
             }
  
             function cls() {
                 scr = "";
                 document.getElementById("output").innerHTML = scr;
             }
         
  
         
         
         
     

实现结果展示：