js 购物车的实现
购物车原理：创建一个构造函数，把涉及到的项目写成方法，然后把这些方法放到构造函数的原型对象上，通过按钮绑定，调用原型对象上的方法，实现对涉及项目的改变
html代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<script src="./js/gouwu.js"></script>
<link rel="stylesheet" href="./css/gouwu.css">
</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>
css代码：
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;
}
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.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();
}
运行结果：
点击“-”号按钮结果：
点击“+”号按钮结果：
点击“删除”按钮结果：
js 购物车的实现的更多相关文章
- 简单实用angular.js购物车功能
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- js购物车计算价格
<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...
- vue.js购物车
vue.js https://cn.vuejs.org/v2/guide/ 简单购物车 <html> <head> <script src="https://c ...
- 原生JS 购物车及购物页面的cookie使用
////////////////////////////////////购物页面 <!DOCTYPE html><html lang="en"><he ...
- JS购物车编辑
实现了:第一件商品的加减实现了:全选/全不选(使用prop而不是attr)实现了:删除(遮罩层) 未实现:第二件商品的删除未实现:小计及应付款额的初始化(写死的) 计算小数乘法时,要先乘100 < ...
- js 购物车中，多件商品数量加减效果修改，实现总价随数量加减改变
<!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <title>无标题文档</ ...
- js 购物车的数量加减，对应的总价也随机变化
html相关的源码: <div class="goods_num clearfix"> <div class="num_name fl"> ...
- Vue node.js商城-购物车模块
一.渲染购物车列表页面 新建src/views/Cart.vue获取cartList购物车列表数据就可以在页面中渲染出该用户的购物车列表数据 data(){ return { car ...
- shoppingCart.js
ylbtech-JavaScript-util: shoppingCart.js 购物车脚本 1.A,JS-效果图返回顶部 1.B,JS-Source Code(源代码)返回顶部 1.B.1,m. ...
随机推荐
- 数据库的ds命令
Mysqi 数据库: 理一下数据库的格式: mysqi 关系型数据库,(表的概念) node.js 非关系性数据库 (json) 结构:数据库存放多张表,每个表可以存放多个字段,每个字段可 ...
- centos6.9安装oracle11g
感谢强哥的文档 源文档链接 https://www.qstack.com.cn/archives/68.html #------------------------------------------ ...
- python面向对象:类空间,对象空间, 组合
一. 类空间,对象空间 1. 类空间,对象空间 创建一个类就会创建一个类的名称空间,用来存储类中定义的所有名字,这些名字称为类的属性 而类有两种属性:静态属性和动态属性 静态属性就是直接在类中定义的变 ...
- PTA2016天梯赛决赛3小时训练赛
7-2 I Love GPLT (5 分) 这道超级简单的题目没有任何输入. 你只需要把这句很重要的话 —— I Love GPLT ——竖着输出就可以了. 所谓“竖着输出”,是指每个字符占一行(包括 ...
- SpringMVC 注解详解
SpringMVC常用注解说明 @Bean, @Configuration表示基于Java配置的类@Bean除了配置在@Configuration,也可以在@Component定义,此时没有特殊意义, ...
- SAS获取最后一条观测到指定宏
data theLast; set sashelp.class nobs=last point=last; output; stop; run; data _null_; set theLast; c ...
- svn在commit后报错:is scheduled for addition, but is missing
删除文件夹后点commit提交,但是报错,报错内容如下: 提示 "svn: Commit failed (details follow): svn: '/***/xxx.c' is sche ...
- KVM总结-KVM性能优化之网络性能优化
前面已经介绍了KVM CPU优化(http://blog.csdn.net/dylloveyou/article/details/71169463).内存优化(http://blog.csdn.net ...
- Oracle：Authid Current_User的使用
我们知道,用户拥有的role权限在存储过程是不可用的.遇到这种情况,我们一般需要显式授权,如grant create table to usera;但这种方法太麻烦,有时候可能需要进行非常多的授权才能 ...
- linux进程端口防火墙
进程端口: 1.netstat –apn :查看所有的进程和端口使用情况 2.查看8080端口是否被占用 [root@localhost bin]# lsof -i:8080 3.查看防火墙开放的端口 ...