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

HTML 或超文本标记语言以及 CSS(级联样式表)和 JavaScript 可用于开发可执行某些功能的交互式用户应用程序。同样，二进制计算器可以完全使用 HTML、CSS 和 JS 开发。二进制计算器对二进制数执行算术运算。二进制计算器的缓冲区限制为 8 位。如果算术运算的结果超过 8 位，那么多余的位将被截断。算术运算是使用 JavaScript 函数完成的。该应用程序由一个显示屏组成，其中显示用户输入以及算术运算的结果。两个按钮 0 和 1 用于接收输入。 + 、 – 、 * 、 / 和计算按钮用于对输入执行算术运算。 “计算”按钮与 JavaScript函数calculate() 绑定。当点击计算按钮时，calculate()函数被触发并且“输出”部分中的 HTML 被解析。第一个数字和第二个数字通过拆分字符串获得，最后使用 parseInt() 将它们转换为整数。方法 parseInt() 接受两个参数，其中第一个是要转换为整数的字符串，第二个是基值，在这种情况下为 2 或二进制。算术运算的执行取决于用户选择的加法、减法、乘法或除法运算符。 input()函数接收用户的输入并将其显示在屏幕上。 backspace()函数删除显示字符串的最后一个字符。 cls()函数清除显示屏幕。以下代码片段实现了一个二进制计算器。

示例：当用户给出输入时，输入以 HTML 的形式保留在“输出”部分中。声明了一个全局变量 scr，所有 JavaScript 函数都可以访问它。当给出任何输入时，它会存储在 scr 变量中。当单击计算按钮时，使用 indexOf() 方法搜索存储在 scr 变量中的字符串是否存在运算符符，如果找到则返回运算符的索引，否则返回 -1。如果存在运算符，则存储在 scr 变量中的字符串将在运算符符号 (+,-,*,/) 处拆分，并将字符串存储到 num 数组中。由于输入是字符串格式，因此必须将其转换为二进制整数格式才能执行计算。字符串被使用parseInt函数(STR，基峰)方法其中str是要转换的字符串解析和碱是数(这里是二值基本= 2)的基极。二进制转换后，执行指定的算术运算，结果再次存储在 scr 变量中并显示在“输出”除法中。

1. HTML：

   html

       
           
           Binary Calculator
           
           
           
       
     
       
           
               
                   Binary Calculator
                   
                   
                       
                           
                               
                                         0
                               
                                         1
                               
                                         AC
                               
                                         Backspace
                           
                       
                       
                           
                               +
                               -
                               *
                               /
                           
                       
                       
                           
                               Calculate
                           
                       
                   
               
           
           
           
           
       

2. CSS：

   html

3. JavaScript：

   javascript

       var scr = ""; //declared as global v
       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;
       }

完整代码：

html

    
        
        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;
            }
        
  
        
        
        
    

输出