投稿
  1. 极客之音首页
  2. 技术随笔

使用JSP实现简易计算器

小半 • • 技术随笔 • 阅读 131

导读：本篇文章讲解 使用JSP实现简易计算器，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com

文章目录

题目

编写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菜鸟新手霞霞

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/91152.html

赞 (0)
小半的头像小半
0 0

相关推荐

极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！