js+css简单购物车页面模板

效果图:

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>购物车</title><script src="gg.js"></script><style>table{width:50%;position:relative;margin:30px auto;border-collapse: collapse;border:1px solid gray;}
th{background: cornflowerblue;height:2.5em;}.tdone{width:10%;}.tdtwo{width:20%;}.tdthree{      width:20%;}.tdfour{        width:20%;}.tdfive{width:20%;}.tdsix{     width:10%;}td{height:2em;       text-align: center;border:1px solid #ccc;}.num{display:inline-block;width:3em;}input{height:2em;}.talast{text-align: left;}</style></head><body><table><thead><tr><th class="tdone">序号</th><th class="tdtwo">商品名称</th><th class="tdthree">数量</th><th class="tdfour">单价</th><th class="tdfive">小计</th><th class="tdsix">操作</th></tr></thead><tbody><tr class="trclass"><td class="tdone xuhao">1</td><td class="tdtwo ">烤煎饼</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">2</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr class="trclass"><td class="tdone xuhao">2</td><td class="tdtwo">珍珠奶茶</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">3.5</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr class="trclass"><td class="tdone xuhao">3</td><td class="tdtwo">羊肉串</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">1.5</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr><td class="tdone xuhao">4</td><td class="tdtwo">牛肉</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">10</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr class="trclass"><td class="tdone xuhao">5</td><td class="tdtwo">烧刀子</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">1.8</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr class="trclass"><td class="tdone xuhao">6</td><td class="tdtwo">水煮鱼</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">15</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr class="trclass"><td class="tdone xuhao">7</td><td class="tdtwo">花生米</td><td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0</span><input type="button" value="+"></span></td><td class="tdfour"><span>单价：</span><span class="unit">3</span></td><td class="tdfive"><span>小计：</span><span class="subtal">0</span></td><td class="tdsix"><button class="del">删除</button></td></tr><tr><td   colspan="6"; class="talast"><span>商品一共 <span class="goods_num">0</span> 件; 共计花费 <span class="pricetal">0</span> 元; 其中最贵的商品单价是 <span class="pricest">0</span> 元</span></td></tr></tbody></table></body></html>

js

window.onload = function(){function cart(){this.abtn = document.querySelectorAll('input');this.ogood_num = document.querySelector('.goods_num');this.opricetal = document.querySelector('.pricetal');this.opricest = document.querySelector('.pricest');this.totalnum = 0;};//小计:  商品数量 * 商品单价cart.prototype.getsubtotal = function(goodsnum,unitprice){return parseInt(goodsnum) * parseFloat(unitprice) ;};// 计算商品的总计花费cart.prototype.gettotal = function(){var asubtotal = document.querySelectorAll('.subtal');var res = 0;for(var i=0,len=asubtotal.length;i<len;i++){res += parseFloat(asubtotal[i].innerHTML);};   return res;};// 寻找购物车中已经选中的产品的最大单价cart.prototype.compareMaxunit = function(){var anum = document.querySelectorAll('.num');var aunit = document.querySelectorAll('.unit');var temp = 0;for(var i=0,len=anum.length;i<len;i++){if(anum[i].innerHTML!=0){if(temp<parseFloat(aunit[i].innerHTML)){temp = parseFloat(aunit[i].innerHTML);}}};return temp;};//打开页面就更新cart.prototype.update= function(){this.ogood_num.innerHTML = this.getNumbertal();this.opricetal.innerHTML = this.gettotal();this.opricest.innerHTML = this.compareMaxunit();this.xuhaosort();}// 点击“+”号按钮触发的购物车商品数量，花费，最大价格的变动cart.prototype.plus = function(obtn){var onum = obtn.parentNode.querySelector('.num');var n = parseInt(onum.innerHTML);onum.innerHTML = ++n ;this.totalnum++;var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);this.ogood_num.innerHTML = this.totalnum;this.opricetal.innerHTML = this.gettotal();this.opricest.innerHTML = this.compareMaxunit();};// 点击“-”号按钮触发的购物车商品数量，花费，最大价格的变动cart.prototype.minus = function(obtn){var onum = obtn.parentNode.querySelector('.num');if(parseInt(onum.innerHTML)>0){var n = parseInt(onum.innerHTML);onum.innerHTML = --n ;this.totalnum--;var oUnit = obtn.parentNode.parentNode.parentNode.querySelector('.unit');var osubtotal = obtn.parentNode.parentNode.parentNode.querySelector('.subtal');osubtotal.innerHTML = this.getsubtotal(onum.innerHTML,oUnit.innerHTML);this.ogood_num.innerHTML = this.totalnum;this.opricetal.innerHTML = this.gettotal();this.opricest.innerHTML = this.compareMaxunit();}  };// 获取已买商品的总计数量cart.prototype.getNumbertal = function(){var anum = document.querySelectorAll('.num');var res_num = 0;for(var i =0;i<anum.length;i++){res_num += parseInt( anum[i].innerHTML ) ;}return res_num ;}// 删除按钮触发的购物车商品数量，花费，最大价格的变动cart.prototype.del = function(obtn){var odel = obtn.parentNode.parentNode;var oparent = odel.parentNode;oparent.removeChild(odel);this.ogood_num.innerHTML = this.getNumbertal();this.opricetal.innerHTML = this.gettotal();this.opricest.innerHTML = this.compareMaxunit();this.xuhaosort();}// 购物车序号重新排序cart.prototype.xuhaosort = function(){var axuhao = document.querySelectorAll('.xuhao');for(var i=0,len=axuhao.length;i<len;i++){axuhao[i].innerHTML = i+1;}}// 绑定“+”，“-”，删除按钮的点击事件cart.prototype.bind = function(){var that = this ;for(var i=0;i<this.abtn.length;i++){if(i%2 !=0){this.abtn[i].onclick = function(){that.plus(this);}}else{this.abtn[i].onclick = function(){that.minus(this);}}};var delbtn = document.querySelectorAll('.del');for(var i=0;i<delbtn.length;i++){delbtn[i].onclick = function(){that.del(this);}}};var oCart = new cart();oCart.bind();oCart.update()}

js+css简单购物车页面模板相关推荐

JS+CSS+HTML购物车详解实现购物车完整功能(附效果图，完整代码)
一.基本功能 1.登录跳转页面 2.添加商品到购物车 3.移出购物车中的商品 4.选中某个商品,动态更新结算价格 5.商品数量的增加与减少 6.全选.反选,动态更新结算价格 7.订单信息填写界面二. ...
php简单网页制作代码,用HTML和CSS以及JS制作简单的网页菜单界面的代码
这篇文章主要介绍了使用HTML+CSS+JS制作简单的网页菜单界面,这个ABROAD项目所使用的JavaScript部分代码非常简单,需要的朋友可以参考下写ABROAD项目用到了标签这个东东,其实标 ...
css画钟表_利用css+原生js制作简单的钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
实验一基于CSS+HTML+JS开发简单个人网站
目录: 实验要求实验代码 1.注册 2.登录 3.主页 4.个人简介 5.我的理想 6.我的生活 7.学习内容总结实验要求实验一基于CSS+HTML+JS开发简单个人网站实验学时:4 ...
126.如何使用CSS和 JS 创建简单图片切换
效果 (源码网盘地址在最后) 视频演示视频地址:https://www.ixigua.com/6914222592170263053/ 源码 index.html <!DOCTYPE html ...
html如何做滑动门效果,JS+CSS实现简单滑动门(滑动菜单)效果
本文实例讲述了JS+CSS实现简单滑动门的方法.分享给大家供大家参考.具体如下: 这是一款超简约设计的滑动门菜单,鼠标放到主菜单上,里面的内容会跟着变化,实际上本演示是一个范例,从代码中的注释你就能感 ...
js html css淘宝足迹日历效果,js实现简单的日历显示效果函数示例
本文实例讲述了js实现简单的日历显示效果函数.分享给大家供大家参考,具体如下: 用一个函数简单的实现一个月份的日历,效果如下: 这个日历效果有高亮显示,我实现的思维比较简单. 我把上面的日历效果用表格 ...
前端(js/css/html)那些小的知识点，持续更新......
前端(js/css/html)那些小的知识点,持续更新...... 1.行内元素与块级元素有哪些及区别? 块级元素和行内元素的区别是,块级元素会占一行显示,而行内元素可以在一行并排显示.通过样式控制, ...
html+css 简单的静态网页小米官网
html+css简单静态小米官网把之前做的改进了一下,其他的都是一样的布局效果图: 新增了一些字体文件不多说上代码 HTML代码: ```html <!DOCTYPE html> & ...

js+css简单购物车页面模板

效果图:

js

js+css简单购物车页面模板相关推荐

最新文章

热门文章