购物车全过程html+css+js
QQ:275487025
QQ群：854312770
欢迎各种大牛指点，和小白一起学习。
html:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车title>
<script src="gg.js">script>
<link rel="stylesheet" href="gg.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">1td>
<td class="tdtwo ">烤煎饼td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">2span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr class="trclass">
<td class="tdone xuhao">2td>
<td class="tdtwo">珍珠奶茶td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">3.5span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr class="trclass">
<td class="tdone xuhao">3td>
<td class="tdtwo">羊肉串td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">1.5span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr>
<td class="tdone xuhao">4td>
<td class="tdtwo">牛肉td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">10span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr class="trclass">
<td class="tdone xuhao">5td>
<td class="tdtwo">烧刀子td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">1.8span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr class="trclass">
<td class="tdone xuhao">6td>
<td class="tdtwo">水煮鱼td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">15span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr class="trclass">
<td class="tdone xuhao">7td>
<td class="tdtwo">花生米td>
<td class="tdthree"><span class="jiajie"><input type="button" value="-"><span class="num">0span><input type="button" value="+">span>td>
<td class="tdfour"><span>单价：span><span class="unit">3span>td>
<td class="tdfive"><span>小计：span><span class="subtal">0span>td>
<td class="tdsix"><button class="del">删除button>td>
tr>
<tr><td colspan="6"; class="talast"><span>商品一共 <span class="goods_num">0span> 件; 共计花费 <span class="pricetal">0span> 元; 其中最贵的商品单价是 <span class="pricest">0span> 元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;iparseFloat(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;iif(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;iparseInt( 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;i1;
}
}
// 绑定“+”，“-”，删除按钮的点击事件
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;ifunction(){
that.del(this);
}
}
};
var oCart = new cart();
oCart.bind();
}