您的位置：首页 > 编程语言 > Java开发

JavaWeb网页版计算器实现

2017-07-07 09:21 204 查看

第一种用javascript方法编写的计算器

[html] view
plain copy

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

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'MyCompute.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>

<style type="text/css">

div{

width:215px;

height:290px;

border:2px solid black;

background-image:url(c1.jpg);

}

#aniu{

width:35px;

height:25px;

}

</style>

<body>

<div align="center">

<h1>My Computer</h1>

<font size="4" >请输入第一个数：</font><br/>

<input type="text" id="num1" style="width:150;"/><br/>

<font size="4" >请输入第二个数：</font><br/>

<input type="text" id="num2" style="width:150;"/> <br/>

<font size="4" >请选择运算方式：</font><br/>

<table>

<tr>

<td><input type="button" value="+" id="aniu" onclick="jia();"/></td>

<td><input type="button" value="-" id="aniu" onclick="jian();"/></td>

<td><input type="button" value="*" id="aniu" onclick="cheng();"/></td>

<td><input type="button" value="/" id="aniu" onclick="chu();"/></td>

</tr>

</table>

<font size="4">计算结果为：</font><br/>

<input type="text" id="result" style="width:150;"/> <br/>

</div>

</body>

<script type="text/javascript">

function jia(){

var n1=document.getElementById("num1");

var n2=document.getElementById("num2");

var nv1=n1.value;

var nv2=n2.value;

var rv=parseInt(nv1)+parseInt(nv2);

var result =document.getElementById("result");

result.value=rv;

}

function jian(){

var n1=document.getElementById("num1");

var n2=document.getElementById("num2");

var nv1=n1.value;

var nv2=n2.value;

var rv=parseInt(nv1)-parseInt(nv2);

var result =document.getElementById("result");

result.value=rv;

}

function cheng(){

var n1=document.getElementById("num1");

var n2=document.getElementById("num2");

var nv1=n1.value;

var nv2=n2.value;

var rv=parseInt(nv1)*parseInt(nv2);

var result =document.getElementById("result");

result.value=rv;

}

function chu(){

var n1=document.getElementById("num1");

var n2=document.getElementById("num2");

var nv1=n1.value;

var nv2=n2.value;

var rv=parseInt(nv1)/parseInt(nv2);

var result =document.getElementById("result");

result.value=rv;

}

</script>

</html>

第二种方法用表单提交运算用转发的方式获得结果，代码如下：

jsp代码：

[html] view
plain copy

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

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'jisuanqi.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>

<div style="border:2px;">

<form action="/Test/JServlet" method="post">

输入一个数：<input type="text" name="num1"/><br/>

选择运算符：<select name="flag">

<option value=1>+</option>

<option value=2>-</option>

<option value=3>*</option>

<option value=4>/</option>

</select><br>

输另一个数：<input type="text" name="num2"/><br/>

<input type="submit" value="提交"/><br/>

</form>

<%

Integer result=(Integer) request.getAttribute("result");

%>

结果为：<input type="text" name="result"value="<%=result %>"/><br/>

</div>

</body>

</html>

servlet代码：

[html] view
plain copy

package com.Servlet.test;

import java.io.IOException;

import java.io.PrintWriter;

import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

public class JServlet extends HttpServlet {

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

String num1 = request.getParameter("num1");

String num2 = request.getParameter("num2");

String f = request.getParameter("flag");

int flag=Integer.parseInt(f);

int n1=Integer.parseInt(num1);

int n2=Integer.parseInt(num2);

int result=0;

switch (flag) {

case 1:result=n1+n2; break;

case 2:result=n1-n2; break;

case 3:result=n1*n2; break;

case 4:result=n1/n2; break;

default:

break;

}

request.setAttribute("result",result);

request.getRequestDispatcher("/com.jsp.test/jisuanqi.jsp").forward(request, response);

}

}

第三种利用javaBean写的，代码如下：

jsp：

[html] view
plain copy

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

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<base href="<%=basePath%>">

<title>My JSP 'JBC.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>

<div align="center"style="background-color:#CDAA7D;width:150px;">

<form action="com.jsp.test/JBC.jsp" method="post">

输入第一个数：<br/>

<input type="text" name="num1" size="15"/><br/>

请选择运算符：<br/>

<input type="radio" name="flag" value="1" /><font size="5"><b>+</b></font>

<input type="radio" name="flag" value="2" /><font size="5"><b>-</b></font>

<input type="radio" name="flag" value="3" /><font size="5"><b>*</b></font>

<input type="radio" name="flag" value="4" /><font size="5"><b>/</b></font>

<br/>

输入第二个数：<br/>

<input type="text" name="num2"size="15"/><br/>

<input type="submit" value="计算"/><br/>

</form>

<jsp:useBean id="coc" class="com.java.test.compute" scope="page"/>

<jsp:setProperty property="*" name="coc"/>

<%

int result=coc.comupter();

%>

输出的结果为：<%=result %><br/>

</div>

</body>

</html>

java文件代码：

[html] view
plain copy

package com.java.test;

public class compute {

private int num1;

private int num2;

private int flag;

private int result;

public int getNum1() {

return num1;

}

public void setNum1(int num1) {

this.num1 = num1;

}

public int getNum2() {

return num2;

}

public void setNum2(int num2) {

this.num2 = num2;

}

public int getFlag() {

return flag;

}

public void setFlag(int flag) {

this.flag = flag;

}

public int comupter() {

switch (flag) {

case 1:result=num1+num2;break;

case 2:result=num1-num2;break;

case 3:result=num1*num2;break;

case 4:result=num1/num2;break;

default:

break;

}

return result;

}

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航