一、流程分析

二、代码

1.view层

(1)list.jsp

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>cartlist.jsp</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">
-->
<script src="<c:url value='/jquery/jquery-2.2.0.js'/>"></script>
<script src="<c:url value='/js/round.js'/>"></script> <link rel="stylesheet" type="text/css" href="<c:url value='/jsps/css/cart/list.css'/>">
<script>
$(function(){
showTotal();
initCheckBox();
initCheckAll();
initJia();
initJian();
}); /*
给全选添加click事件
*/
function initCheckAll() {
$("#selectAll").click(function() {
var bool = $(this).prop("checked");
$("input[type=checkbox][name=checkboxBtn]").prop("checked", bool);
setJieSuan(bool);
showTotal();
});
}
/*
给所有条目的复选框添加click事件
*/
function initCheckBox() {
$("input[type=checkbox][name=checkboxBtn]").click(function() {
var all = $("input[type=checkbox][name=checkboxBtn]").length;//所有条目的个数
var selected = $("input[type=checkbox][name=checkboxBtn]:checked").length;
var selectAll = $("#selectAll");
if(all == selected) {//全都选中
selectAll.prop("checked", true);
setJieSuan(true);//让结算按钮有效
} else if(selected == 0) {//全都没选中
selectAll.prop("checked", false);
setJieSuan(false);
} else {
selectAll.prop("checked", false);
setJieSuan(true);
}
showTotal();
});
} /*
* 设置结算按钮样式
*/
function setJieSuan(bool) {
var jiesuan = $("#jiesuan");
if(bool) {
jiesuan.removeClass("kill").addClass("jiesuan");
jiesuan.unbind("click");//撤消当前元素的所有click事件
} else {
jiesuan.removeClass("jiesuan").addClass("kill");
jiesuan.click(function() {return false});
}
} /*
* 计算总计
*/
function showTotal() {
var total = 0;
var id;
var text;
$("input[type=checkbox][name=checkboxBtn]:checked").each(function( index, domEle) {
id = $(domEle).val();
text = $("#" + id + "Subtotal").text();
total += Number(text);
});
$("#total").text(total);
} // 给加号添加click事件
function initJia() {
$(".jia").click(function() {
var id = $(this).prop("id").substring(0, 32);
var quantity = $("#" + id + "Quantity").val();
sendUpdateQuantity(id, Number(quantity) + 1);
});
} // 给减号添加click事件
function initJian() {
$(".jian").click(function() {
var id = $(this).prop("id").substring(0, 32);
var quantity = $("#" + id + "Quantity").val();
// 判断当前数量是否为1,如果为1,那就不是修改数量了,而是要删除了。
if(quantity == 1){
if(confirm("您是否真要删除该条目?"))
location = "/goods/CartItemServlet?method=batchDelete&cartItemIds=" + id;
} else {
sendUpdateQuantity(id, quantity-1);
}
});
} // 请求服务器,修改数量。
function sendUpdateQuantity(id, quantity) {
$.ajax({
async : false,
cache : false,
url : "/goods/CartItemServlet",
data : {method:"updateQuantity", cartItemId:id, quantity:quantity},
type : "POST",
dataType : "json",
}).done(function(data) {
$("#" + id + "Quantity").val(data.quantity);
$("#" + id + "Subtotal").text(data.subtotal);
showTotal();
});
}
</script>
</head>
<body> <c:choose>
<c:when test="${empty items }">
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="right">
<img align="top" src="<c:url value='/images/icon_empty.png'/>"/>
</td>
<td>
<span class="spanEmpty">您的购物车中暂时没有商品</span>
</td>
</tr>
</table>
</c:when> <c:otherwise>
<table width="95%" align="center" cellpadding="0" cellspacing="0">
<tr align="center" bgcolor="#efeae5">
<td align="left" width="50px">
<input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">全选</label>
</td>
<td colspan="2">商品名称</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr> <c:forEach items="${items }" var="item"> <tr align="center">
<td align="left">
<input value="${item.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/>
</td>
<td align="left" width="70px">
<a class="linkImage" href="<c:url value='/BookServlet?method=load&bid=${item.book.bid }'/>"><img border="0" width="54" align="top" src="<c:url value='${item.book.image_b }'/>"/></a>
</td>
<td align="left" width="400px">
<a href="<c:url value='/BookServlet?method=load&bid=${item.book.bid }'/>"><span>${item.book.bname }</span></a>
</td>
<td><span>&yen;<span class="currPrice" id="${item.cartItemId }CurrPrice">${item.book.currPrice }</span></span></td>
<td>
<a class="jian" id="${item.cartItemId }Jian"></a><input class="quantity" readonly="readonly" id="${item.cartItemId }Quantity" type="text" value="${item.quantity }"/><a class="jia" id="${item.cartItemId }Jia"></a>
</td>
<td width="100px">
<span class="price_n">&yen;<span class="subTotal" id="${item.cartItemId }Subtotal">${item.getSubtotal() }</span></span>
</td>
<td>
<a href="<c:url value='/CartItemServlet?method=batchDelete&cartItemIds=${item.cartItemId }'/>">删除</a>
</td>
</tr>
</c:forEach> <tr>
<td colspan="4" class="tdBatchDelete">
<a href="javascript:batchDelete();">批量删除</a>
</td>
<td colspan="3" align="right" class="tdTotal">
<span>总计:</span><span class="price_t">&yen;<span id="total"></span></span>
</td>
</tr>
<tr>
<td colspan="7" align="right">
<a href="javascript:jiesuan();" id="jiesuan" class="jiesuan"></a>
</td>
</tr>
</table>
<form id="jieSuanForm" action="<c:url value='/CartItemServlet'/>" method="post">
<input type="hidden" name="cartItemIds" id="cartItemIds"/>
<input type="hidden" name="total" id="hiddenTotal"/>
<input type="hidden" name="method" value="loadCartItems"/>
</form>
</c:otherwise>
</c:choose> </body>
</html>

(2)round.js

 function round(num,dec){
var strNum = num + '';/*把要转换的小数转换成字符串*/
var index = strNum.indexOf("."); /*获取小数点的位置*/
if(index < 0) {
return num;/*如果没有小数点,那么无需四舍五入,返回这个整数*/
}
var n = strNum.length - index -1;/*获取当前浮点数,小数点后的位数*/
if(dec < n){
/*把小数点向后移动要保留的位数,把需要保留的小数部分变成整数部分,只留下不需要保留的部分为小数*/
var e = Math.pow(10, dec);
num = num * e;
/*进行四舍五入,只保留整数部分*/
num = Math.round(num);
/*再把原来小数部分还原为小数*/
return num / e;
} else {
return num;/*如果当前小数点后的位数等于或小于要保留的位数,那么无需处理,直接返回*/
}
}

网上图书商城项目学习笔记-014购物车模块页面javascrip的更多相关文章

  1. 网上图书商城项目学习笔记-011Book模块查询(分页)

    一.流程分析 1.图书模块 2.分布分析 二.代码 1.view层 1)list.jsp <%@ page language="java" import="java ...

  2. 网上图书商城项目学习笔记-012BOOK模块查询2

    一.分析 > 按图名查询(模糊)(分页)> 按作者查询(分页)> 按出版社查询(分页)> 按id查询> 多条件组合查询(分页) 二.代码 1.view层 (1)gj.js ...

  3. 网上图书商城项目学习笔记-037工具类之BaseServlet及统一中文编码

    1.统一中文编码分析 tomcat默认esetISO-8859-1编码,在servlet中,可能通过request的setCharacterEncoding(charset)和response.set ...

  4. 网上图书商城项目学习笔记-036工具类之CommonUtils及日期转换器

    1.CommonUtils.java package cn.itcast.commons; import java.util.Map; import java.util.UUID; import or ...

  5. 网上图书商城项目学习笔记-035工具类之JdbcUtils及TxQueryRunner及C3P0配置

    事务就是保证多个操作在同一个connection,TxQueryRunner通过JdbcUtils获取连接,而JdbcUtils通过ThreadLocal<Connection>确保了不同 ...

  6. 【Java EE 学习 25 上】【网上图书商城项目实战】

    一.概述 1.使用的jdk版本:1.6 2.java EE版本:1.6 3.指导老师:传智播客 王建 二.小项目已经实现的功能 普通用户: 1.登陆 2.注册 3.购物 4.浏览 管理员用户(全部管理 ...

  7. 基于SSH的网上图书商城-JavaWeb项目-有源码

    开发工具:Myeclipse/Eclipse + MySQL + Tomcat 项目简介: 技术:Java:JSP:JDBC,struts2,spring,hibernate数据库: mysqlweb ...

  8. JavaWeb网上图书商城完整项目--day02-4.regist页面提交表单时对所有输入框进行校验

    1.现在我们要将table表中的输入的参数全部提交到后台进行校验,我们提交我们是按照表单的形式提交,所以我们首先需要在table表外面添加一个表单 <%@ page language=" ...

  9. JavaWeb网上图书商城完整项目--24.注册页面的css样式实现

    现在框架已经做好了,即下来我们要对页面进行装饰了,第一步给每一个元素添加id 1.最外面的div添加id为divMain 2.第二个div添加id为divTitle,里面的span对应的id为span ...

随机推荐

  1. 暑假集训(4)第七弹——— 组合(hdu1850)

    题意概括:你赢得了第一局.魔鬼给出的第二局是,如果有N堆牌,先手的人有几种可能胜利. 问题分析:尼姆游戏,先得到n堆牌的数量异或和,再将异或和与每一个牌组的数量异或,如果结果小于原牌组数量 则可能++ ...

  2. JAVA_SE复习(异常)

    异常.调试和断言 一. 异常的分类 1. 可查异常    例: 2. 不可查异常  例:Runtime Exception 3. 异常的分类结构: 1. 不执行finally 子句的唯一情况是虚拟机关 ...

  3. JAVA_SE复习(Class)

    一.面向对象程序设计(OOP) 1.面向对象的程序设计是程序开发的一种方法.它将对象作为程序的基本单元,将程序和 数据封装其中,以提高软件的重用性.灵活性和扩展性 2.三个特征: 封装:隐藏信息 继承 ...

  4. SMB/CIFS协议解析二

    一.拷贝文件(远程-->本地) 1.SMB_COM_NT_CREATE_ANDX (0xa2)       打开文件,获取文件名,获得读取文件的  总长度. 2.SMB_COM_READ     ...

  5. JavaScript的语法要点 4 - 面向对象的基础

    在传统的面向对象语言如C++.C#.Java中有类.对象.继承等概念.在JavaScript中又如何表示呢?JavaScript中没有class关键字,JavaScript中的类.对象.继承的概念是通 ...

  6. 粗谈Android中的对齐

    在谈这个之前先啰嗦几个概念. 基线:书写英语单词时为了规范书写会设有四条线,从上至下第三条就是基线.基线对齐主要是为了两个控件中显示的英文单词的基线对齐,如下所示: Start:在看API的时候经常会 ...

  7. laravel方法汇总详解

    1.whereRaw() 用原生的SQL语句来查询,whereRaw('select * from user') 就和 User::all()方法是一样的效果 2.whereBetween() 查询时 ...

  8. [Linux]学习笔记(3)-uname的用法

    uname的用法如下: uname –a[--all]:输出全部信息 [root@linuxforlijiaman ~]# uname -a Linux linuxforlijiaman -.el6. ...

  9. python字典操作

    Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型.一.创建字典字典由键和对应值成对组成.字典也被称作关联数组或哈希表.基本语法如下: 代码如下: dict ...

  10. python的浅拷贝和深拷贝

    python对象有两种拷贝的形式:浅拷贝和深拷贝. 在<python核心编程>中看到对这两种拷贝的分析,觉得十分收益,所以记录在此. id()方法:id()方法可以查看某个对象的ID,类似 ...