前端——编写一个简易网页计算器

如下图效果所示，输入两个运算数，点击不同的运算符，会在下方得到不同的运算结果

分析与代码实现

在HTML部分，定义了一个标题为"网页计算器"的网页，并创建了两个输入框和四个按钮。最后，创建了一个只读的结果显示框，便于计算结果的输出

在JavaScript部分，定义了一个名为compute的函数，该函数接收一个参数func，根据func的值调用相应的计算函数。函数内部首先获取输入的两个数字的值，并使用validateInput函数验证输入是否合法。如果输入不合法，则返回false；否则，根据func的值调用相应的计算函数，并将结果赋值给结果显示框。

再定义了一些辅助函数，包括验证输入是否合法的validateInput函数、加法函数add、减法函数sub、乘法函数mul和除法函数div。其中，除法函数会检查除数是否为0，如果是0则提示错误并返回false。

  
  
  
      
      
      
  
  
    
    
运算数1：
  
    
    
运算数2：
  
    
    
  
          
          
          
          
    
  
    
    
  
      
    
    function compute(func){  
        // 获取输入的运算数1和运算数2的值
        var num1 = document.getElementById('num1').value;  
        var num2 = document.getElementById('num2').value;  
        // 验证输入是否合法，如果不合法则返回false
        if (!validateInput(num1) || !validateInput(num2)){  
            return false;  
        }  
        // 根据func的值调用相应的计算函数，并将结果赋值给结果显示框
        document.getElementById('result').value = func(parseFloat(num1), parseFloat(num2));  
    }  
    
    function validateInput(input){  
        if (isNaN(input) || input === "") {  
            return false;  
        } else {  
            return true;  
        }  
    }  
    
    function add(num1, num2){  
        return num1 + num2;  
    }  
    
    function sub(num1 , num2){  
        return num1 - num2;  
    }  
    
    function mul(num1, num2){  
        return num1 * num2;  
    }  
    
    function div(num1, num2){  
        if (num2 == 0){  
            alert("除数不能为0");  
            return false;  
        }  
        return num1 / num2;  
    }