JSP(3)使用jsp实现简单的计算器

1 目录结构

JSP(3)使用jsp实现简单的计算器_第1张图片                  JSP(3)使用jsp实现简单的计算器_第2张图片

2 代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>


<html>
  <head>
    <title>My JSP 'MyCalInterface.jsp' starting pagetitle>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    
    <%-- 引用js文件 --%>
    <script type="text/javascript" src="js/js1.js">script>

  head>

  <body>
    <%-- 使用js验证输入的两种方式,①在form属性中验证onsubmit; ②在按钮事件中验证onclick --%>
    <form action="/CalJsp/Result.jsp" method="post" onsubmit="return checkNum()">
        请输入第一个数:<input type="text" id="num1" name="num1" /><br />
        请输入第二个数:<input type="text" id="num2" name="num2" /><br/> 
        请选择运算符:<select name="operator">
            <option>+option>
            <option>-option>
            <option>*option>
            <option>/option>
        select><br/>
        <input type="submit" onclick="return checkNum()" value="计算" />
    form>
  body>
html>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'Result.jsp' starting page</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

  </head>

  <body>
    <%
        <%-- 获取提交的数据,与servlet一样 --%>
        String num1 = request.getParameter("num1");
        String num2 = request.getParameter("num2");
        String oper = request.getParameter("operator");

        double res = 0;
        double d_num1 = Double.parseDouble(num1);
        double d_num2 = Double.parseDouble(num2);

        if(oper.equals("+")) { res = d_num1 + d_num2; } 
        else if (oper.equals("-")) { res = d_num1 - d_num2; } 
        else if (oper.equals("*")) { res = d_num1 * d_num2; } 
        else if (oper.equals("/")) { res = d_num1 / d_num2; }

        out.println("结果是:" + res);
     %>
  </body>
</html>

js1文件:http://blog.csdn.net/u013943420/article/details/70157168#t2

3 将以上代码合并到一个文件(界面与计算操作合为一个文件)

<%-- 只保留变化的部分 --%>

<html>
  <head>
  head>
  <%
        String num1 = request.getParameter("num1");
        String num2 = request.getParameter("num2");
        String oper = request.getParameter("operator");
        double res = 0;
        if (num1!=null && num2!=null && oper!=null) {

            double d_num1 = Double.parseDouble(num1);
            double d_num2 = Double.parseDouble(num2);
            if(oper.equals("+")) { res = d_num1 + d_num2; } 
            else if (oper.equals("-")) { res = d_num1 - d_num2; } 
            else if (oper.equals("*")) { res = d_num1 * d_num2; } 
            else if (oper.equals("/")) { res = d_num1 / d_num2; }
        }
     %>
  <body>

    <form action="/CalJsp/MyCalInterface.jsp" method="post" onsubmit="return checkNum()">
        <%-- 提交表单后,输入框内数字保留 --%>
        请输入第一个数:<input type="text" id="num1" value="<%= num1==null?"":num1 %>" name="num1" /><br />
        请输入第二个数:<input type="text" id="num2" value="<%= num2 %>" name="num2" /><br/> 
        请选择运算符:<select name="operator">
            <option>+option>
            <option>-option>
            <option>*option>
            <option>/option>
        select><br/>
        <input type="submit" onclick="return checkNum()" value="计算" />
    form>
     结果是:<%= res %>
  body>
html>

你可能感兴趣的:(JSP,jsp)