1. 程式人生 > >JSP(3)使用jsp實現簡單的計算器

JSP(3)使用jsp實現簡單的計算器

1 目錄結構

這裡寫圖片描述                  這裡寫圖片描述

2 程式碼

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'MyCalInterface.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"> <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<%-- 引用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>

3 將以上程式碼合併到一個檔案(介面與計算操作合為一個檔案)

<%-- 只保留變化的部分 --%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>