JavaScript程序设计教程 第11章 综合实战--实现购物车功能.pdf

第11章综合实战实现购物车功能 11.1购物车特效布局OO 11.2准备工作OO11.3商品全选及合计功能实现O O 11.4商品预览浮层功能o11.5取消选择与事件代理OO 11.6OO11.7QO11.8小结商品价格计算实现删除QOO11.1 购物车特效布局(1)body中定义table标签和div标签，table标签存放所有商 品列表，div标签存放商品结算部分内容。(2)table标签中定义thead和tbody标签，thead标签即表格 头部，tbody标签即表格具体内容。(3)tbody中存放4个tr,每个tr代表一个商品，依次用td标 O签存放商品的勾选框、缩略图、商品名称、商品单价、商品增 减操作按钮以及小计总价等。(4)div标签存放商品全选框、批量删除按钮、已选商品的预 览浮层以及商品计算价格。div标签样式为“foot”时商品预览 浮层隐藏，div标签样式为“foot show时商品预览浮层显示 o相应的css详见脚本style.css,此处不做赘述。购物车显示效果如图1L 1所示。M全选商品单价数量小计操作iphoneX78287828删除iphone6s plus36993699删除华为P1034883488删除0H 题族Pro7 plus23992399删除M全选删除已选商品4件-合计：17414.00结箕图11.1购物车效果图o11.2 准备工作有了购物车总体布局之后就可以开始一步步进行功能实现 了。比如购物车的全选功能实现、商品价格计算、购物车商品 删除等。而在实现这些功能之前需要先获取页面元素以及做一 些兼容性处理。这里单独写一个脚本script.js文件来实现购 物车的一系列操作。然后在html中引入外部脚本script,js文 件。ooooo window.onload=function()var cartlable=document.getElementByldCcartTable*);var tr=cartTable.children1.rows;var checkinputs=document.getElementsByClassName(check);var checkAIIInputs=document.getElementsByClassName(check-air);var selectedTotal=document.getElementByld(selectedTotar);var pricelbtal=document.getElementByld(priceTotar);if(Jdocument.getElementsByClassName)document.getElementsByClassName=function(cis)var ret=;var els=document.getElementsByTagName(*);for(var i=0,len=els.length;i=0|elsi.className.indexOf(+cis+)=0|elsi.className.indexOf(+cis)=0)ret.push(elsi);ooQreturn ret;脚本 scriptjsoQO分析如下。(1)window,onload=function().;OOQ将所有代码写在window,onload事件中，window,onload 事件控制在文档加载完毕后才执行JavaScript代码，避免了无 法获取对象的情况发生。，(2)var cartTable=document.getElementById(，cartTable，);通过getElementByld方法获取table元素。Ooo(3)var tr=cartTable.children1.rows;:获取table元素下岬有tr元素，即获取所有的商品。cartTable.children表示cartTable所有子节点。cartTable.childrenl表示获取cartTable的两个子节点即tbody元素。rows属性为表麻质海有属性存放节占下面的所有 tr o(4)var checkinputs=document.getElementsByClassName(，check);通过getElementsByClassName方法获取所有的选择框，这里 所有选择框都有样式check。Oo(5)var checkAllInputs=document.getElementsByClassNameC check-获取所有全选框，check-all为全选框的特有样式。o(6)if(!document.getElementsByClassName)O判断方法getElementsByClassName是否存在。低版本IE不支持getElementsByClassName方法，兼容IE则需 要自定义 getElementsByClassName 方法。OQo(7)document.getElementsByClassName=function(cis).);q 自定义getElementsByClassName方法，传入参数cis类名1,表示想通过哪个类名来获取元素。(8)var ret=;var els=document.getElementsByTagName(;定义数组ret接收返回的结果。定义变量els获取所有元素 6O(9)for(var i=0;len=els.length;i len;i+)?for循环遍历所有元素，判断每个元素的classname是否等A于传递进来的参数cis,如果等于则调用数组的push方法将该 元素添加到数组ret。Oo(10)var selectedTotal=document.getElementById(selectedTotal);1 获取已选商品数量元素。Rl)var priceTotal=document.getElementById(priceTotal);获取商品总价格元素。oo o喂QoI 11.3商品全选及合计功能实现 首先给购物车添加商品全选的功能，即勾选全选按钮，商品前面的选择框全部选中；也可以单独勾选商品的选择框实现 单选；商品选择同时合计总价格会相应变化。购物车商品选中效果如图11.2和图11.3所示。OO已选商品4件 合计：17414.00结算图11.2购物车全选效果图单价数星小计78281+782836991+369934881+348823991+2399全选 删除已选商品2件4 合计：11527.00操作删除删除删除删除结算图11.3购物车部分选中效果oT 11.4商品预览浮层功能1 前面完成了购物车的单击功能（即选择功能），选择商 品可以计算价格和数量。但选中商品预览浮层功能还没有实 现。浮层布局已在11.1节中实现了。这里需要用JavaScript 去控制显示浮层内容。购物车商品预览浮层显示效果如图11.4所示。OOO图11.4购物车商品预览浮层显示效果X 11-5取消选择与事件代理前面完成了购物车商品预览浮层的显示与隐藏，但商品?“取消选择”的功能还没有实现。单击商品“取消选择”，i 需要相应地将该商品从浮层中删除，同时将该商品置为未选 中状态。正常情况下，给取消选择增加onclick单击事件即 o 可处理，但这里浮层内容是动态加载的，即一开始是不存在 1 内容的，添加任何事件都是无法生效的。这样就需要引入 JavaScript的“事件代理”,也称“事件委托”，利用事件o 冒泡将事件添加到它们的父节点，也称将事件委托给父节点 来触份卜理函和购物车商品最消选择效果如图11.5所示。O图11.5购物车商品取消选择效果ooooo11.6商品价格计算购物车可以添加多种商品，也可以对一种商品添加多个,这就涉及商品数量的增减问题。单击按钮商品数量增加,oo价格也需要更新，单击按钮商品数量减少价格也相应更 新。有两种实现方法，一种是循环遍历每一行对和”按钮分别添加单击事件，一种是使用前面介绍的事件代理，将和的单击事件代理到每个tr元素上去实现。这里采 用第2种方法，无需重复绑定元素，避免影响页面性能。购物车商品价格计算显示效果如图11.6所示。Ooo图11.6购物车商品价格计算显示效果9 11.7实现删除1 购物车单选、全选、增删商品以及小计、合计功能实现后，还剩删除功能未处理。删除分为单行删除和批量删除。!单行删除是针对每一行删除商品，同样可以用事件代理，将1单行删除的单击事件代理到每个tr元素上去实现。购物车商品删除效果如图11.7所示。OOO,全选商品单价数量小计操作aQCEBI k-iphone6s plus36991+3699蒯除a华为P1034881+3488删除 转族。ro7 plus23992399删除1i1+0 ig删除已选商品3件人 合计：9586.00结算图11.7购物车商品删除效果o 11.8小结综合前面小节的内容，购物车的一系列功能已全部实现。本章的项目基于JavaScript的购物车功能看起来是非常简 单的，实际上运用了前面所学的各章节基础知识，如JavaScript 的BOM操作、D0M操作、表格操作、事件处理等，将这些知识融合 在一起实现类似淘宝的购物车功能。当然，本章实现的功能是非O常简单的，可以在此基础上，随着需求的增长而不断地去完善。通过本章的项目实战，需要学会解决问题的思路以及思考需要运?用哪些技术，以怎样的方式去实现各种功能。