使用JSP制作一个超简单的网页计算器的实例分享
实现一个简单的计算器程序，要求：使用jsp+javabean模式实现。
项目源代码如下：
文件：calculator.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page isErrorPage="true"%>
<%@ page errorPage="calculator.jsp" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>简单的计算机</title>
</head>
<body>
<%--创建Calculator对象--%>
<jsp:useBean id="cal" class="cn.zq.domain.Calculator" />
<%--设置值 通配符*表示设置所有属性--%>
<jsp:setProperty property="*" name="cal"/>
<%--
进行计算
--%>
<c:if test="${empty pageContext.exception}">
<%
cal.calculate();
%>
</c:if>
<hr/>
<p>计算结果：${cal.firstNum } ${cal.operator } ${cal.secondNum } = ${cal.result }</p>
<hr/>
<%--
构建url
--%>
<c:url var="formUrl" value="/calculator.jsp"/>
<form action="${formUrl }" method="post">
<table border="1" cellpadding="2">
<tr>
<td colspan="2" align="center">我的计算器</td>
</tr>
<tr>
<td>第一个参数:</td>
<td><input type="text" name="firstNum"/></td>
</tr>
<tr>
<td>运算符：</td>
<td>
<select name="operator">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
</td>
</tr>
<tr>
<td>第二个参数：</td>
<td>
<input type="text" name="secondNum">
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="计算" />
</td>
</tr>
</table>
</form>
</body>
</html>
本文使用的javabean代码如下：
package cn.zq.domain;
public class Calculator {
private String firstNum;
private String operator;
private String secondNum;
private String result;
public String getFirstNum() {
return firstNum;
}
public void setFirstNum(String firstNum) {
this.firstNum = firstNum;
}
public String getOperator() {
return operator;
}
public void setOperator(String operator) {
this.operator = operator;
}
public String getSecondNum() {
return secondNum;
}
public void setSecondNum(String secondNum) {
this.secondNum = secondNum;
}
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
public Calculator() {}
public Calculator(String firstNum, String operator, String secondNum,
String result) {
this.firstNum = firstNum;
this.operator = operator;
this.secondNum = secondNum;
this.result = result;
}
public void calculate(){
if(operator != null && !operator.equals("")){
double first = new Double(firstNum);
double second = new Double(secondNum);
char oper = operator.charAt(0);
switch (oper) {
case '+':
result = first + second + "";
break;
case '-':
result = first - second + "";
break;
case '*':
result = first * second + "";
break;
case '/':
result = first / second + "";
break;
default:
throw new RuntimeException("未知运算符!");
}
}
}
}
最终完成的效果图如下：
总结：前面只是一个小的练习，实际上还是有很多缺陷的，在数据提交后未进行校验。很显然jsp+javabean模式只适合完成简单的计算，要是要完成的功能比较复杂的话，这种模式就不合适了。要是在jsp页面进行一些业务的处理，也使得程序混乱不堪，最后难以维护，上面例子的业务逻辑的处理是直接在javabean中完成的，实际的项目中，业务不会这么简单，常常涉及到一些对数据库的操作，应该把各个成分都给分离开来，这样以后维护起来也容易多了，也会让程序员赏心悦目，假如是一个逻辑层次划分的不是很良好的项目，维护起来真叫人恶心，让我抓狂。
相关推荐
-
js实现简单计算器
参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
-
简单实现JS计算器功能
该计算器功能: 1.校验:小数点,重复计算,以及大量更符合用户体验的操作. 2.能够从键盘输入. 效果图: html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type
-
html+js实现简单的计算器代码(加减乘除)
html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&
-
Javascript 实现计算器时间功能详解及实例（二）
Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator
-
node.js+express制作网页计算器
环境: 主机:WIN10 express安装: 1.安装express-generator 输入命令: npm install -g express-generator 2.安装express 输入命令: npm install -g express 3.验证是否安装成功 输入命令:express -V 查看帮助:express --help 建立工程: express -e calculator cd calculator && npm install 运行默认网页: 输入命令:npm
-
javascript实现简单的可随机变色网页计算器示例
本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META
-
使用jsp调用javabean实现超简单网页计算器示例
以下是代码: Calculator.java 复制代码 代码如下: package com.amos.model; import java.math.BigDecimal; /** * @ClassName: Calculator * @Description: 计算器 * @author: amosli * @email:amosli@infomorrow.com * @date Mar 20, 2014 1:04:59 AM */ public class Calculator {
-
js实现简单的计算器功能
话不多说,请看示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> * { margin: 0 auto; padding: 0px; } html, body { width: 100%; height: 100%; } a { text-
-
基于JSP实现一个简单计算器的方法
本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getSch
-
javascript实现简易计算器的代码
今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
-
JS 实现计算器详解及实例代码（一）
Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板
-
网页计算器 一个JS计算器
一个挺小的JavaScript网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算,点击"运行代码"可以运行一下看效果. 计算器 button {width:40; border: 1 solid #808080;background-color: #FFFFFF}   ← 1 2 3 + 4 5 6 - 7 8 9 × C 0 = ÷ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]