使用JSP实现简易计算器

系统管理员 2023-09-23 14:14 19阅读 0赞

### 文章目录 ###

*  题目
 *  方法一
 *  方法二
 *  方法三
 *  方法四

# 题目 #

编写JSP程序实现简易计算器。要求：输入“第一个参数”，选择运算类型（+，-，\*，/），输入“第二个参数”，按“计算"按钮，结果侠士在“结果”文本框中。  
注意：程序需要对输入参数是否合法进行判断。例如参数是否为数字，除数是否为0。

注意使用提交时使用 type="submit" 和使用οnclick="calculator()"调用方法在页面表现上的区别

# 方法一 #

点击计算后上一次计算的数字会清除

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JSP简易计算器</title>
        <script type="text/javascript">
    <%--        检查表单不能用空值--%>
            function myCheck(){
          
                for (var i=0; i<document.form_post.elements.length-1; i++){
          
                    if (document.form_post.elements[i].value==null){
          
                        alert("当前表单不能有空值");
                        document.form_post.elements[i].focus();
                        return false;
                    }
                }
                return true;
            }
    
        </script>
    </head>
    <body>
        <h1>我的简易计算器1</h1>
        <hr>
        <form name="form_post" action="" method="post" onsubmit="return myCheck()">
            请输入第一个数：<input type="text" name="first_num"
                           onkeyup="if(isNaN(value))execCommand('undo')"
                           onafterpaste="if(isNaN(value))execCommand('undo')"/><br><br>
            请选择运算方式
            <select name="operator">
                <option  value="+">+</option>
                <option  value="-">-</option>
                <option  value="*">*</option>
                <option  value="/">/</option>
            </select>
            <br><br>
            请输入第二个数：<input type="text" name="second_num"
                           onkeyup="if(isNaN(value))execCommand('undo')"
                           onafterpaste="if(isNaN(value))execCommand('undo')"/><br>
            <br>
    <%--        <input type="submit" onclick="calculator()" value="提交">--%>
            <button type="submit" >提交</button>
    
            <input type="reset" value="重置">
        </form>
    
        <%
            //获取表单中的数据进行运算
            String first = request.getParameter("first_num");
            String second = request.getParameter("second_num");
            String get_operator = request.getParameter("operator");
            String result = "";
    //        if (!first.equals(""))
            if(first != null)
            {
                //判断运算符
                if (get_operator.equals("+")) {
                    result = String.valueOf((Integer.valueOf(first) + Integer.valueOf(second)));
                }
                if (get_operator.equals("-")) {
                    result = String.valueOf((Integer.valueOf(first) - Integer.valueOf(second)));
                }
                if (get_operator.equals("*")) {
                    result = String.valueOf((Integer.valueOf(first) * Integer.valueOf(second)));
                }
                if (get_operator.equals("/")) {
    
                    if (second.equals("0")) {
                        result = "除数不能为0";
                    } else {
                        result = String.valueOf((double) (Integer.valueOf(first) / (double) Integer.valueOf(second)));
                    }
                }
            }
    
            //定义一个计算器类
            Calculator calculator = new Calculator();
            calculator.setResult(result);
            if (!calculator.getResult().equals("")&&calculator.getResult()!=null){
                out.print("计算结果:<input type='text'");
                out.print("value="+calculator.getResult());
                out.print(">");
            }
    
        %>
    
        <br><br>
    <%--    结果：<input type="text" id="result">--%>
    
    </body>
    </html>

# 方法二 #

点击计算后上一次计算的数字还会存在

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>JSP+JS计算器</title>
        <script type="text/javascript">
            <%--        检查表单不能用空值--%>
            function myCheck(){
          
                for (var i=0; i<document.form_post.elements.length-1; i++){
          
                    if (document.form_post.elements[i].value==""){
          
                        alert("当前表单不能有空值");
                        document.form_post.elements[i].focus();
                        return false;
                    }
                }
                return true;
    
            }
            //计算方法
            function calculator(){
          
                var first = parseInt(document.getElementById("first_num").value);
                var second = parseInt(document.getElementById("second_num").value);
                var operator = document.getElementById("operator").value;
                // var result;
    
                switch (operator) {
          
                    case '+':
                        result = first + second;
                        break;
                    case '-':
                        result = first - second
                        break;
                    case '*':
                        result = first * second;
                        break;
                    case '/':
                        result = first / second;
                        break
                }
                var result_input = document.getElementById("result_input")
                // result_input.value = result;
                result_input.setAttribute("value", result);
            }
    
        </script>
    </head>
    <body>
        <h1>我的简易计算器2</h1>
        <hr>
        <form name="form_post">
            请输入第一个数：<input type="text" name="first_num" id="first_num"
                           onkeyup="if(isNaN(value))execCommand('undo')"
                           onafterpaste="if(isNaN(value))execCommand('undo')"/><br><br>
            请选择运算方式
            <select name="operator" id="operator">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <br><br>
            请输入第二个数：<input type="text" name="second_num" id="second_num"
                           onkeyup="if(isNaN(value))execCommand('undo')"
                           onafterpaste="if(isNaN(value))execCommand('undo')"/><br>
            <br>
    <%--        如果这里的提交按钮用input的话页面会自动刷新，用button的话会保存在页面上--%>
    <%--        <input type="submit" onclick="calculator()" value="提交">--%>
            <button type="button" onclick="calculator()">提交</button>
            <input type="reset" value="重置">
        </form>
        结果：<input type="text" id="result_input">
    
    </body>
    </html>

# 方法三 #

方法二的小改动

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
    <script>
        function getresult(){
          
            var num1 = document.getElementById("num1").value;
            var sig = document.getElementById("sig").value;
            var num2 = document.getElementById("num2").value;
            n1 = parseInt(num1);
            n2 = parseInt(num2);
            if (sig=="/"&&num2=="0"){
          
                document.getElementById("result").value="除数不能为0"
            }else if (isNaN(num1)==true||isNaN(num2)==true){
          
                //isNaN返回为数字输出fasle，返回其他值输出true
                document.getElementById("result").value="输入的参数必须为数字";
            }else {
          
                switch (sig) {
          
                    case "+":
                        document.getElementById("result").value = n1+n2;
                        break;
                    case "-":
                        document.getElementById("result").value = n1-n2;
                        break;
                    case "*":
                        document.getElementById("result").value = n1*n2;
                        break;
                    case "/":
                        document.getElementById("result").value = n1/n2;
                        break;
                }
            }
        }
    </script>
        <h1>我的计算器3</h1>
        <hr><br><br>
        <form action="" method="get">
            请输入第一个数:<input type="text" name="firstnum" id="num1"><br><br>
            请选择运算方法：
            <select name="sig" id="sig">
                <option value="+">+</option>
                <option value="-">-</option>
                <option value="*">*</option>
                <option value="/">/</option>
            </select>
            <br><br>
            请输入第二个数:<input type="text" name="secondnum" id="num2"><br><br>
            <button type="button" onclick="getresult()">计算</button>
            <button type="reset">重置</button>
            <br><br>
            结果：<input type="text" name="result" id="result">
    
        </form>
    </body>
    </html>

# 方法四 #

使用两个JSP文件刚进入服务器时，一个页面输入数据，另一个页面接收到输入的数据然后进行计算  
页面一

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
        <h1>我的简易计算器5</h1>
        <hr>
        <form name="form_post" action="calculator5_to.jsp" method="post">
            请输入第一个数：<input type="text" name="first_num" id="first_num"
                           onkeyup="if(isNaN(value))execCommand('undo')"
                           onafterpaste="if(isNaN(value))execCommand('undo')"/><br><br>
            请选择运算方式
            <select name="operator" id="operator">
                <option>+</option>
                <option>-</option>
                <option>*</option>
                <option>/</option>
            </select>
            <br><br>
            请输入第二个数：<input type="text" name="second_num" id="second_num"
                           onkeyup="if(isNaN(value))execCommand('undo')"
                           onafterpaste="if(isNaN(value))execCommand('undo')"/><br>
            <br>
            <%--        如果这里的提交按钮用input的话页面会自动刷新，用button的话会保存在页面上--%>
            <%--        <input type="submit" onclick="calculator()" value="提交">--%>
            <button type="submit" >提交</button>
            <input type="reset" value="重置">
        </form>
    
        结果：<input type="text" id="result_input" value="">
    </body>
    </html>

页面二

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>Title</title>
    </head>
    <body>
      <h1>我的简易计算器5</h1>
      <hr>
      <form name="form_post">
        请输入第一个数：<input type="text" name="first_num" id="first_num"
                       onkeyup="if(isNaN(value))execCommand('undo')"
                       onafterpaste="if(isNaN(value))execCommand('undo')"/><br><br>
        请选择运算方式
        <select name="operator" id="operator">
          <option>+</option>
          <option>-</option>
          <option>*</option>
          <option>/</option>
        </select>
        <br><br>
        请输入第二个数：<input type="text" name="second_num" id="second_num"
                       onkeyup="if(isNaN(value))execCommand('undo')"
                       onafterpaste="if(isNaN(value))execCommand('undo')"/><br>
        <br>
        <%--        如果这里的提交按钮用input的话页面会自动刷新，用button的话会保存在页面上--%>
        <%--        <input type="submit" onclick="calculator()" value="提交">--%>
        <button type="submit">提交</button>
        <input type="reset" value="重置">
      </form>
    
      <%
        //获取表单中的数据进行运算
        String first = request.getParameter("first_num");
        String second = request.getParameter("second_num");
        String get_operator = request.getParameter("operator");
        String result = "";
    
        //判断运算符
        if(get_operator.equals("+")) {
          result = String.valueOf((Integer.valueOf(first) + Integer.valueOf(second) ));
        }
        if(get_operator.equals("-")) {
          result = String.valueOf((Integer.valueOf(first) - Integer.valueOf(second) ));
        }
        if(get_operator.equals("*")) {
          result = String.valueOf((Integer.valueOf(first) * Integer.valueOf(second) ));
        }
        if(get_operator.equals("/")) {
    
          if(second.equals("0")) {
            result = "除数不能为0";
          }else {
            result = String.valueOf((double)(Integer.valueOf(first) / (double)Integer.valueOf(second) ));
          }
        }
      %>
      结果：<input type="text" id="result_input" value="<%=result%>">
    
    </body>
    </html>

> 本文有参考自本站博主：沫痕轩、一只小小的蚂蚁、\_IT菜鸟新手霞霞