使用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中完成的,实际的项目中,业务不会这么简单,常常涉及到一些对数据库的操作,应该把各个成分都给分离开来,这样以后维护起来也容易多了,也会让程序员赏心悦目,假如是一个逻辑层次划分的不是很良好的项目,维护起来真叫人恶心,让我抓狂。

时间: 2016-04-12

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

使用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 实现计算器详解及实例代码(一)

Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器 自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板

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-

网页计算器 一个JS计算器

一个挺小的JavaScript网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算,点击"运行代码"可以运行一下看效果. 计算器 button {width:40; border: 1 solid #808080;background-color: #FFFFFF}   &nbsp ← 1 2 3 + 4 5 6 - 7 8 9 × C 0 = ÷ [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

Javascript 实现计算器时间功能详解及实例(二)

Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示 效果图如下: 代码 初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator

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

javascript实现简单的可随机变色网页计算器示例

本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META

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&

简单实现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

js实现简单计算器

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html

基于JSP实现一个简单计算器的方法

本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>  <%  String path = request.getContextPath();  String basePath = request.getSch

基于JavaScript实现一个简单的Vue

Object.defineProperty() 实现之前我们得先看一下Object.defineProperty的实现,因为vue主要是通过数据劫持来实现的,通过get.set来完成数据的读取和更新. var obj = {name:'wclimb'} var age = 24 Object.defineProperty(obj,'age',{ enumerable: true, // 可枚举 configurable: false, // 不能再define get () { return a

JS基于递归实现网页版计算器的方法分析

本文实例讲述了JS基于递归实现网页版计算器的方法.分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1.css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮. <style>放入head中 这个div放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮. <div class="bg"> <div id="txt"&

原生js基于canvas实现一个简单的前端截图工具代码实例

这篇文章主要介绍了原生js基于canvas实现一个简单的前端截图工具代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 先看效果 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{

使用MongoDB和JSP实现一个简单的购物车系统实例

本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JSP编程技术实现一个简单的购物车程序,具体要求如下. (1)用JSP编写一个登录页面,登录信息中有用户名和密码,分别用两个按钮来提交和重置登录信息. (2)编写一个JSP程序来获取用户提交的登录信息并查询数据库,如果用户名为本小组成员的名字且密码为对应的学号时,采用JSP内置对象的方法跳转到订购页面(显示店中商品的种类和单价等目录信息):否则采用JSP动作提示用户重新登录(注:此页面上要包含前面的登录界面). (3

基于Python实现一个简单的银行转账操作

前言 在进行一个应用系统的开发过程中,从上到下一般需要四个构件:客户端-业务逻辑层-数据访问层-数据库,其中数据访问层是一个底层.核心的技术.而且在实际开发中,数据库的操作也就是说数据访问层都是嵌套在其他语言中的,其是编程的核心.本文面向的是python语言,即通过python操作数据库来实现简单的银行转账操作. 工具 python提供了python DB API用来统一操作数据库,使访问数据库的接口规范化,在没有python DB API之前,接口程序十分混乱,不同的数据库需要不同的操作接口,

Java实现一个简单的缓存方法

缓存是在web开发中经常用到的,将程序经常使用到或调用到的对象存在内存中,或者是耗时较长但又不具有实时性的查询数据放入内存中,在一定程度上可以提高性能和效率.下面我实现了一个简单的缓存,步骤如下. 创建缓存对象EntityCache.java public class EntityCache { /** * 保存的数据 */ private Object datas; /** * 设置数据失效时间,为0表示永不失效 */ private long timeOut; /** * 最后刷新时间 */

java基于Socket做一个简单下载器

本文实例为大家分享了java基于Socket制作下载器的过程,及相关代码,供大家参考,具体内容如下 1.首先要建立一个服务器用来处理信息并给客户端传输文件(电脑)  我是用电脑开了一个WIFI,手机连上后使用scoket传输的  SERVERIP要根据自己实际情况更改.端口也可以随便更改0~65535,尽量选大一点 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.Buf

用python实现一个简单计算器(完整DEMO)

一.功能目标 用户输入一个类似  1-2*((60-30+(-40/5)*(9-2*5/3+7/3*99/4*2998+10*568/14))-(-4*3)/(16-3*2))  这样的表达式,假设表达式里面除了包含空格.'+'.'-'.'*'.'/'和括号再无其他特殊符号,然后自己动手写代码解析其中的表达式,实现加减乘除,最后得出的结果与真实的计算机所算的结果必须一致. 二.解题思路 1.为了分开运算符和数字,因此把输入的字符串格式转换为 列表的格式进行处理,这样子就可以按位进行 处理了 2.

基于JQuery的一个简单的鼠标跟随提示效果

1.效果如图 2.实现思路 1 鼠标移入标题(这里是<a>标签) 创建一个div,div的内容为鼠标位置的文本 将创建好的div加到文档中 为提示层设置位置 2 鼠标移出标题 移除div 3 当鼠标在标题内移动时 同样添加div效果 3.JQuery实现代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="t