微商水印相机做网站,家乡网站建设可行性分析,外贸网站源码怎么建,服装网站建设规划方案我们肯定都很熟悉商品购物车这一功能#xff0c;每当我们在某宝某东上购买商品的时候#xff0c;看中了哪件商品#xff0c;就会加入购物车中#xff0c;最后结算。购物车这一功能#xff0c;方便消费者对商品进行管理#xff0c;可以添加商品#xff0c;删除商品#…我们肯定都很熟悉商品购物车这一功能每当我们在某宝某东上购买商品的时候看中了哪件商品就会加入购物车中最后结算。购物车这一功能方便消费者对商品进行管理可以添加商品删除商品选中购物车中的某一项或几项商品最后商品总价也会随着消费者的操作随着变化。现在笔者对购物车进行了简单实现能够实现真实购物车当中的大部分功能。在本示例当中用到了javascript中BOM操作DOM操作表格操作cookiejson等知识点同时采用三层架构方式对购物车进行设计对javascript的综合应用较强对javascript初学者进阶有一定的益处。请看主页效果图现在读者已经对主页的效果图进行了了解我在这里附上主页的html代码供读者参考建议读者根据自己的思路写代码。请看html代码商品列表页面商品列表我的购物车0 智能手表酷黑棒棒棒棒998添加购物车 智能手机001金红色酷酷酷酷1998添加购物车 华为手机002帅帅帅帅帅帅帅帅帅帅998添加购物车 华为手机003杠杠的2000添加购物车html结构代码有了之后就可以对主页进行css表现设计这里不对css进行过多讲解。我们对主页进行设计之后就可以进行与主页相关的DOM操作涉及到添加按钮的点击事件cookie和json的应用cookie主要为了让当前数据与购物车进行共享以方便操作。请看与之相关的javascript代码这是index.js代码主要是主页的相关操作/*思路第一步获取所要操作的节点对象第二步当页面加载完后需要计算本地cookie存了多少【个】商品把个数赋值给ccount第三步为每一个商品对应的添加购物车按钮绑定一个点击事件onclick更改本地的cookie获取当前商品的pid循环遍历本地的cookie转换后的数组取出每一个对象的pid进行对比若相等则该商品不是第一次添加从购物车中取出该商品然后更pCount值追加1否则创建一个新的对象保存到购物中。同时该商品的数量为1*/var ccount document.getElementById(ccount); //显示商品总数量的标签节点对象var btns document.querySelectorAll(.list dl dd button); //所有的购物车按钮//约定好用名称为datas的cookie来存放购物车里的数据信息 datas里所存放的就是一个json字符串var listStr cookieObj.get(datas);/*判断一下本地是否有一个购物车(datas)没有的话创建一个空的购物车有的话就直接拿来使用*/if(!listStr) { //没有购物车 datas jsoncookieObj.set({name: datas,value: []});listStr cookieObj.get(datas);}var listObj JSON.parse(listStr); //数组/*循环遍历数组获取每一个对象中的pCount值相加总和*/var totalCount 0; //默认为0for(var i 0, len listObj.length; i len; i) {totalCount listObj[i].pCount totalCount;}ccount.innerHTML totalCount;/*循环为每一个按钮添加点击事件*/for(var i 0, len btns.length; i len; i) {btns[i].onclick function() {var dl this.parentNode.parentNode;var pid dl.getAttribute(pid);//获取自定义属性var arrs dl.children;//获取所有子节点if(checkObjByPid(pid)) {listObj updateObjById(pid, 1)} else {var imgSrc arrs[0].firstElementChild.src;var pName arrs[1].innerHTML;var pDesc arrs[2].innerHTML;var price arrs[3].firstElementChild.innerHTML;var obj {pid: pid,pImg: imgSrc,pName: pName,pDesc: pDesc,price: price,pCount: 1};listObj.push(obj)listObj updateData(listObj);}ccount.innerHTML getTotalCount();}}这是cookie.js的代码主要涉及cookie的设置获取操作采用单例设计模式进行了封装设计请看代码/*单例设计模式完整形式[]中是可选项document.cookie “namevalue[;expiresdate][;pathpath-to-resource][;domain域名][;secure]”*/var cookieObj {/*增加或修改cookie参数o 对象{}name:string cookie名value:string cookie值expires:Date对象 过期时间path:string 路径限制domain:string 域名限制secure:boolean true https false或undeinfed*/set: function(o) {var cookieStr encodeURIComponent(o.name) encodeURIComponent(o.value);if(o.expires) {cookieStr ;expires o.expires;}if(o.path) {cookieStr ;path o.path;}if(o.domain) {cookieStr ;domain o.domain;}if(o.secure) {cookieStr ;secure;}document.cookie cookieStr;},/*删除参数n string cookie的名字*/del: function(n) {var date new Date();date.setHours(-1);//this代表的是当前函数的对象this.set({name: n,expires: date});},/*查找*/get: function(n) {n encodeURIComponent(n);var cooikeTotal document.cookie;var cookies cooikeTotal.split(; );for(var i 0, len cookies.length; i len; i) {var arr cookies[i].split();if(n arr[0]) {return decodeURIComponent(arr[1]);}}}}下面的是server.js代码主要对购物车中各种操作进行了封装比如商品个数统计更新获取本地数据等操作方便代码管理请看代码/*功能查看本地数据中是否含有指定的对象(商品)根据id参数id商品的标识*/function checkObjByPid(id) {var jsonStr cookieObj.get(datas);var jsonObj JSON.parse(jsonStr);var isExist false;for(var i 0, len jsonObj.length; i len; i) {if(jsonObj[i].pid id) {isExist true;break;}}return isExist; //return false;}/*功能更新本地数据参数arr 数组对象返回一个值最新的本地转换后的数组对象* */function updateData(arr) {var jsonStr JSON.stringify(arr);cookieObj.set({name: datas,value: jsonStr});jsonStr cookieObj.get(datas);return JSON.parse(jsonStr);}/*获取商品的总数量返回数字*/function getTotalCount() {/*循环遍历数组获取每一个对象中的pCount值相加总和*/var totalCount 0; //默认为0var jsonStr cookieObj.get(datas);var listObj JSON.parse(jsonStr);for(var i 0, len listObj.length; i len; i) {totalCount listObj[i].pCount totalCount;}return totalCount;}/*更新本地数据根据pidid:商品的标识*/function updateObjById(id, num) {var jsonStr cookieObj.get(datas);var listObj JSON.parse(jsonStr);for(var i 0, len listObj.length; i len; i) {if(listObj[i].pid id) {listObj[i].pCount listObj[i].pCount num;break;}}return updateData(listObj)}/*获取本地数据返回 数组对象* */function getAllData() {var jsonStr cookieObj.get(datas);var listObj JSON.parse(jsonStr);return listObj;}function deleteObjByPid(id) {var lisObj getAllData();for(var i 0, len lisObj.length; i len; i) {if(lisObj[i].pid id) {lisObj.splice(i, 1);break;}}updateData(lisObj);return lisObj;}因为上述代码中涉及了进入购物车后的一些操作读者看了之后可能会感动疑惑不用担心下面请看点击进入我的购物车之后的分析。请看效果图笔者在主页中点击了三种商品共点击了七次在购物车中出现了相应商品以及价格计算。对于途中的各种信息相信读者一目了然。请看本购物车的html代码购物车购物车返回商品列表页面全选图片描述数量单价小计操作购物车里没有任何商品总价格0在对购物车进行相关的表现设计之后既要进行javascript行为设计请看与本页相关的cart.js代码/*思路第一步当页面加载完后根据本地的数据动态生成表格(购物车列表)获取所要操作的节点对象判断购物车中是否有数据有显示出购物列表没有提示购物车为空第二步当购物车列表动态生成后获取tbody里所有 的checkeBox标签节点对象看那个被选中就获取对应行小计进行总价格运算。第三步为每一个checkbox添加一个onchange事件根据操作更改总价格第四步全选第五步为加减按钮添加一个鼠标点击事件更改该商品的数量第六步删除获取所有的删除按钮为删除按钮添加一个鼠标点击事件删除当前行并更新本地数据*/var listObj getAllData();var table document.getElementById(table)var box document.getElementById(box)var tbody document.getElementById(tbody);var totalPrice document.getElementById(totalPrice);var allCheck document.getElementById(allCheck);if(listObj.length 0) { //购物车为空box.className box;table.className hide;} else {box.className box hide;table.className ;for(var i 0, len listObj.length; i len; i) {var tr document.createElement(tr);tr.setAttribute(pid, listObj[i].pid);//{pid:值,pImg:值,pName:值,pDesc:值,price:值,pCount:1},tr.innerHTML listObj[i].pDesc - listObj[i].price listObj[i].price * listObj[i].pCount 删除 ;tbody.appendChild(tr);}}/*功能计算总价格*/var cks document.querySelectorAll(tbody .ck);function getTotalPrice() {cks document.querySelectorAll(tbody .ck);var sum 0;for(var i 0, len cks.length; i len; i) {if(cks[i].checked) { //如果当前被选中var tr cks[i].parentNode.parentNode;var temp tr.children[5].firstElementChild.innerHTML;sum Number(temp) sum;}}return sum;}/*循环遍历为每一个checkbox添加一个onchange事件*/for(var i 0, len cks.length; i len; i) {cks[i].onchange function() {checkAllChecked();totalPrice.innerHTML getTotalPrice();}}/*全选实现*/allCheck.onchange function() {if(this.checked) {for(var i 0, len cks.length; i len; i) {cks[i].checked true;}} else {for(var i 0, len cks.length; i len; i) {cks[i].checked false;}}totalPrice.innerHTML getTotalPrice();}var downs document.querySelectorAll(.down); //一组减的按钮var ups document.querySelectorAll(.up); //一组加的按钮var dels document.querySelectorAll(.del); //一组删除按钮for(var i 0, len downs.length; i len; i) {downs[i].onclick function() {var txtObj this.nextElementSibling;//下一个兄弟节点var tr this.parentNode.parentNode;var pid tr.getAttribute(pid);txtObj.value txtObj.value - 1;if(txtObj.value 1) {txtObj.value 1;updateObjById(pid, 0)} else {updateObjById(pid, -1)}tr.children[0].firstElementChild.checked true;checkAllChecked();var price tr.children[4].firstElementChild.innerHTML;tr.children[5].firstElementChild.innerHTML price * txtObj.value;totalPrice.innerHTML getTotalPrice();}ups[i].onclick function() {var txtObj this.previousElementSibling;//上一个兄弟节点var tr this.parentNode.parentNode;var pid tr.getAttribute(pid);txtObj.value Number(txtObj.value) 1;updateObjById(pid, 1)tr.children[0].firstElementChild.checked true;checkAllChecked()var price tr.children[4].firstElementChild.innerHTML;tr.children[5].firstElementChild.innerHTML price * txtObj.value;totalPrice.innerHTML getTotalPrice();}dels[i].onclick function() {var tr this.parentNode.parentNode;var pid tr.getAttribute(pid)if(confirm(确定删除)) {//remove() 自杀tr.remove();listObj deleteObjByPid(pid);}if(listObj.length 0) { //购物车为空box.className box;table.className hide;} else {box.className box hide;table.className ;}totalPrice.innerHTML getTotalPrice();}}/*检测是否要全选*/function checkAllChecked() {var isSelected true; //全选是否会选中for(var j 0, len cks.length; j len; j) {if(cks[j].checked false) {isSelected false;break;}}allCheck.checked isSelected;}上述代码完成了购物车中的相关操作比如价格计算商品数量更换商品删除等操作。到这里我们已经完成了购物车的大部分功能我们对htmlcss, BOM,DOM,json,cookie等进行了综合应用相信读者理解之后一定会对自己的javascript学习更进一步本示例中涉及的大部分代码都在本页中贴出部分代码资源未向读者展示读者可以点击下面的资源链接下载本示例的全部代码及图片资料。本示例采用HBuilder编译器编译运行涉及cookie操作请读者自行安装服务器或者添加到HBuilder中运行查看。以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家。
