使用JSP实现简易计算器

于 2022-11-07 01:01:33 发布
阅读量2.5k 收藏 11
点赞数 2
分类专栏： Web 文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mfysss/article/details/127723833
版权

文章目录

题目

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

没反应说说说
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jsp实现的简易计算器
10-15
Jsp简易计算器
jsp之一个简单的计算器
11-05
jsp之一个简单的计算器；知识点: 1. 如何接收jsp页面提交的数据，并处理 2. jsp中如何使用Java片段 3. jsp中如何使用JavaScript完成对数据合法性的校验
jsp实现一个简单的计算器
yaoyy2009的专栏
12-29 602
&lt;!-- 这是一个计算器 --&gt; &lt;%@ page contentType="text/html; charset=gb2312" %&gt; &lt;html&gt; &lt;h1&gt;计算器&lt;/h1&gt; &lt;hr&gt; &lt;script language = "javascript"&g
jsp-简单计算器
jfr123的博客
09-09 2872
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
jsp实现简易计算器
qq_52108058的博客
06-25 8193
输入两个数实现加减乘除，结果输出到页面上 简易的jsp代码，有两个输入框，四个提交按钮 1、addalltwo.jsp 嵌套在jsp中的java代码，接收两个输入值，通过判断运算符进行相应运算，注意除数不为零的情况 通过输出嵌套在jsp中的java值......
基于JSP实现一个简单计算器的方法
01-20
在本实例中，我们将探讨如何使用JavaServer Pages (JSP) 实现一个简单的计算器应用。JSP 是一种基于Java的动态网页技术，它允许开发者在HTML中嵌入Java代码，以便处理服务器端逻辑。 首先，我们看到的是`index.jsp`...
使用jsp调用javabean实现超简单网页计算器示例
10-26
在本节内容中，我们将详细介绍如何使用JSP和JavaBean技术实现一个简单的网页计算器。我们将通过代码示例、组件功能以及执行过程来逐步解析整个实现过程。 首先，我们需要了解什么是JavaBean。JavaBean是Java语言...
使用JSP+Servlet制作的简易计算器
最新发布
11-10
总的来说，这个简易计算器项目是一个学习JSP和Servlet的入门实践，它涵盖了基本的HTTP请求处理、数据传输以及前后端交互。通过这个项目，开发者可以深入理解Web应用的基本工作原理，同时也能提升在实际开发中的问题...
JSP简易计算器
08-05
使用Javabean+JSP实现的一个简单计算器
Jsp实现计算器
09-06
实现了简单的加、减、乘、除,使用简单的MVC架构
jsp简易计算器
12-12
使用jsp写的简单计算器，简单熟练了解jsp使用。
用JSP制作的计算器
06-23
用JSP实现的计算器（包含数据库，用户注册登录和两种计算器显示方式）管理员和用户两种操作
jsp网页简单计算器---菜鸟级别的
06-19
一个jsp开发的网页计算器，里面的一连串的计算代码还可以值得学习一下，菜鸟级别的，里面还有一点bug 只提供学习娱乐
JSP写的一个简单计算器
daniel_kaka专栏
04-17 5309
JSP写的一个简单计算器 pageEncoding="UTF-8"%>http://www.w3.org/TR/html4/loose.dtd">              一简单的计数器                                                   计算结果       =                                      第一个
jsp实现简易计算器简单理解
qq_62599142的博客
09-25 1259
里面设置name不然后端获取的时候，只会获取到第一个）接着就是运算阶段，因为获取得到的都是字符串类型所以，需要转换成整数型才能进行加减运算，再通过if语句判断传进来的符号是加减乘除，通过equals（）函数判断（equals函数用于判断字符串）页面当中，request. getParameter内置函数，获取到前面的name的值num1、num2以及运算符（运算符的获取在select中设置name不要在±。页面当中，两个input文本框和一个select下选框实现±。
基于JSP编写的一个简易的计算器
热门推荐
tengqifa的博客
03-24 1万+
1、一个javaweb项目里面两个.jsp文件，其中一个为：index.jsp，代码如下如下：&lt;%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getSch...
jsp版计算器
hoho_12
12-11 2143
要求：当用户输入的数据不完整时，需要重新输入信息。输入完整的数据后，要将输入的数据以及计算的结果显示在页面上。 1、jisuan.jsp <% String number1str=request.getParameter("number1"); String number2str=request.getParameter("number2"); String optionstr=req
使用jsp实现简易计算器
在【标题】"jsp简易计算器"和【描述】中，我们可以了解到这是一个使用JavaServer Pages (JSP) 技术编写的简单计算器应用。这个应用可以帮助开发者学习和实践JSP的基础知识，例如声明、脚本元素、JSP动作标签等。 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值