题目
编写JSP程序实现简易计算器。要求:输入“第一个参数”,选择运算类型(+,-,*,/),输入“第二个参数”,按“计算"按钮,结果侠士在“结果”文本框中。
注意:程序需要对输入参数是否合法进行判断。例如参数是否为数字,除数是否为0。
方法一
点击计算后上一次计算的数字会清除
<%@ 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菜鸟新手霞霞