购物车功能

js部分

/*加入购物车*/
function loadCar(){
var carData = JSON.parse(getCar());
if(carData){
var carUl = document.getElementById("carUl");
for(var i=0;i<carData.length;i++){
/*增加li*/
var li = document.createElement("li");
li.setAttribute("data-id",carData[i].id)

carUl.appendChild(li);
/*list_left*/
/*增加div*/
var divLeft = document.createElement("div");
divLeft.setAttribute("class","list_left")
li.appendChild(divLeft);
/*复选框*/
var inputDiv = document.createElement("div");
inputDiv.setAttribute("id",("input_")+carData[i].id);
inputDiv.setAttribute("onclick","checkboxImg(this)");
var inputImg = document.createElement("img");
inputImg.setAttribute("alt","0");
inputImg.src="./images/checkbox0.png";
inputDiv.appendChild(inputImg);
divLeft.appendChild(inputDiv);
/*产品图片*/
var img = document.createElement("img");
img.setAttribute("onclick","clickImg(this)");
img.src=carData[i].imgSrc;
divLeft.appendChild(img);
/*产品名称*/
var h6 = document.createElement("h6");
var productTitle=document.createTextNode(carData[i].product_title);
h6.appendChild(productTitle);
divLeft.appendChild(h6);
/*产品介绍*/
var strong = document.createElement("strong");
var strongText =document.createTextNode(carData[i].productExplain)
strong.appendChild(strongText);
divLeft.appendChild(strong);
/*增加p1*/
var p1 = document.createElement("p");
var p1Title=document.createTextNode("功效：")
p1.appendChild(p1Title);
divLeft.appendChild(p1);
/*产品功效*/
var span1=document.createElement("span");
var spanText=document.createTextNode(carData[i].productEffect)
span1.appendChild(spanText)
p1.appendChild(span1);
/*产品颜色*/
var p2 = document.createElement("p");
var p2Title=document.createTextNode("颜色：")
p2.appendChild(p2Title);
divLeft.appendChild(p2);
/*产品颜色*/
var span2=document.createElement("span");
var span2Text=document.createTextNode(carData[i].productColor)
span2.appendChild(span2Text)
p2.appendChild(span2);
/*div:lest_right*/
/*增加div*/
var divRight=document.createElement("div");
divRight.setAttribute("class","list_right");
li.appendChild(divRight);
/*增加i 商品单价*/
var tageI=document.createElement("i");
var iTitle=document.createTextNode("￥")
tageI.appendChild(iTitle);
var pro_price = document.createTextNode(carData[i].price.toFixed(2))
tageI.appendChild(pro_price);
divRight.appendChild(tageI);
/*增加div*/
var tageDiv=document.createElement("div");
tageDiv.setAttribute("class","pro_number_btn");
divRight.appendChild(tageDiv);
/*减减按钮*/
var buttonAdd=document.createElement("button");
var buttonText = document.createTextNode("-");
buttonAdd.setAttribute("onclick","reduce(this)");
buttonAdd.appendChild(buttonText);
tageDiv.appendChild(buttonAdd);
/*数量提示*/
var inputInfo=document.createElement("input");
inputInfo.setAttribute("type","text");
inputInfo.setAttribute("onchange","numChange(this)");
inputInfo.setAttribute("value",carData[i].num);
tageDiv.appendChild(inputInfo);
/*增加按钮*/
var buttonPre=document.createElement("button");
var buttonText2 = document.createTextNode("+");
buttonPre.setAttribute("onclick","add(this)");
buttonPre.appendChild(buttonText2);
tageDiv.appendChild(buttonPre);
/*增加b 商品小计*/
var tageb=document.createElement("b");
tageb.setAttribute("data-id",carData[i].id)
tageb.setAttribute("id","totalPrice");
var iTitle1=document.createTextNode("￥")
tageb.appendChild(iTitle1);
var total = document.createTextNode(carData[i].totalPrice);
tageb.appendChild(total);
divRight.appendChild(tageb);
/*增加div:cart_btn*/
var tageDivBtn=document.createElement("div");
tageDivBtn.setAttribute("class","cart_btn");
divRight.appendChild(tageDivBtn);
/*产品删除*/
var buttonDel=document.createElement("button");
var buttonDelText = document.createTextNode("删除");
buttonDel.setAttribute("onclick","deletePro(this)")
buttonDel.appendChild(buttonDelText);
tageDivBtn.appendChild(buttonDel);
/*产品收藏按钮*/
var buttonGood=document.createElement("button");
var buttonGoodText = document.createTextNode("移动到我的收藏");
buttonGood.appendChild(buttonGoodText);
tageDivBtn.appendChild(buttonGood);

/*增加清除浮动的div*/
var divClear=document.createElement("div");
divClear.setAttribute("class","clear");
li.appendChild(divClear);
}
}
}
//删除对应的商品
function deletePro(obj){
var li = obj.parentNode.parentNode.parentNode;
var id = li.getAttribute("data-id");
delProduct(id);
li.remove();
}
//商品数量加操作
function add(obj){
var prd_num = obj.previousSibling;
var id = obj.parentNode.parentNode.parentNode.getAttribute("data-id");
var bNode = obj.parentNode.nextSibling;
var num = prd_num.value;
if(isNaN(num)){
num = 1;
}else{
num = parseInt(num);
}

num+=1;
prd_num.value = num;
changeCarNum(id,num,bNode);
}
//商品数量改变的操作
function numChange(obj){
var num = obj.value;
var id = obj.parentNode.parentNode.parentNode.getAttribute("data-id");
var bNode = obj.parentNode.nextSibling;
console.log(id)


if(isNaN(num)){
num = 1;
}
num = parseInt(num);
obj.value = num;
changeCarNum(id,num,bNode)
console.log(num)


}
//商品数量减操作
function reduce(obj){
var prd_num = obj.nextSibling;
var id = obj.parentNode.parentNode.parentNode.getAttribute("data-id");
var bNode = obj.parentNode.nextSibling;
var num = prd_num.value;
if(isNaN(num)){
num = 1;
}else{
num = parseInt(num);
}
num-=1;
if(num<1){
num=1;
}
prd_num.value = num;
changeCarNum(id,num,bNode);
}
//改变本地数据的数量
function changeCarNum(id,num,bNode){
var carData = JSON.parse(getCar());
console.log(bNode);
for(var i=0;i<carData.length;i++){
if(carData[i].id == id){
carData[i].num = num;
carData[i].totalPrice = (carData[i].price*num).toFixed(2);
bNode.innerText=("￥"+carData[i].totalPrice)
console.log(bNode.innerText)
console.log(carData[i].totalPrice)
break;
}
}
addCar(carData);
}
/*选择打钩*/
var checkboxImg = function (clickObj){
var carData = JSON.parse(getCar());
if(carData){
var img = clickObj.firstChild;
var imgNum = img.alt;
show(imgNum,img)
}
}
/*判断img的alt值 imgNum为图片的alt值，img为图片对象*/
function show(imgNum,img){
if(imgNum === "1"){
img.src="./images/checkbox0.png";
img.setAttribute("alt","0");
}else{
img.src="./images/checkbox.png";
img.setAttribute("alt","1");
}
}
/*点击图片复选框选中*/
function clickImg(imgObj){
var carData = JSON.parse(getCar());
var id = imgObj.parentNode.parentNode.getAttribute("data-id");
if(carData){
var inputImg = imgObj.previousSibling.firstChild
var imgNum = inputImg.alt;
show(imgNum,inputImg)
}
}

上面是删除几点的不

下面是本地存储

var keyName = "shopCar"
//将商品添加到购物车
function addShopCar(product){
var productData = getCar();
if(!productData){
var proData = [
product
]
addCar(proData)
}else{
var carData = JSON.parse(productData);
var bool = true;
for(var i=0;i<carData.length;i++){
if(carData[i].id == product.id){
carData[i].num=parseInt(carData[i].num) + parseInt(product.num);
carData[i].totalPrice = (parseFloat(carData[i].totalPrice) + parseFloat(product.totalPrice)).toFixed(2);
bool = false;
break;
}
}
if(bool){
carData.push(product)
}
addCar(carData);
}
}
function getCar(){
return localStorage.getItem(keyName);
}
function addCar(productData){
localStorage.setItem(keyName,JSON.stringify(productData));
}
//通过指定的id删除对应的商品
function delProduct(id){
var carData = JSON.parse(getCar());
var arrData = [];
for(var i=0;i<carData.length;i++){
if(carData[i].id == id){
continue;
}else{
arrData.push(carData[i])
}
}
addCar(arrData);
}
//清空购物车
function clearCar(){
localStorage.removeItem(keyName);
}

function clearProAll(){
clearCar();
var ul = document.getElementById("carUl");
console.log(ul)
if(ul){
var li = ul.getElementsByTagName("li");
var length = li.length;
for(var i=0;i<length;i++){
ul.remove(i);
}
}
}

html部分

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车中心</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/page_common.css" />
<link rel="stylesheet" href="css/shop_cart.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<script src="js/shopCar.js"></script>

<style>
body{1200px;margin:0 auto;}
</style>

</head>
<body onload="loadCar()">
<div><a href="javascript:clearProAll();">清空购物车</a></div>
<div class="shop_cart_head">
<h4>全部商品</h4>
<div class="right">
配送：<select name="" id="">
<option value="">广州市天河区</option>
<option value="">广州市白云区</option>
<option value="">广州市越秀区</option>
<option value="">广州市番禺区</option>
<option value="">深圳市龙岗区</option>
</select>
</div><!-- right -->
</div><!-- shop_cart_head -->
<div class="shop_cart clear">
<div class="shop_cart_top">
<div><img src="./images/checkbox.png" alt="1" id="checkbox_All" onclick="checkboxAll()"/></div>
<h5>全选</h5>

<h6>商品信息</h6>
<ol>
<li>单价</li>
<li>数量</li>
<li>金额</li>
<li>操作</li>
</ol>

</div><!-- shop_cart_top -->
<div class="shop_cart_list">
<ul id="carUl">
<!--<li>
<div class="list_left">

<div id="input" onclick="checkboxImg(this)"><img src="./images/checkbox.png" alt="1" id="aaa"/></div>
<img src="./images/shop_cart_01.jpg" alt="shop_cart_01">
<h6>雅诗兰黛唇膏口红 女 花漾唇膏炫慕系列 </h6>
<strong>正品 滋润保湿持久</strong>
<p>
功效：<span>易上色 滋润 保湿</span>
</p>
<p>
颜色：<span>玫瑰红</span>
</p>
</div>
<div class="list_right">
<i>￥299.00</i>
<div class="pro_number_btn">
<button>-</button>
<input type="text" value="1">
<button>+</button>
</div>
<b>￥299.00</b>
<div class="cart_btn">
<button>删除</button>
<button>移动到我的收藏</button>
</div>
</div>
<div class="clear"></div>
</li>-->
</ul>
</div><!-- shop_cart_list -->
</div><!-- shop_cart -->
<div class="amount">

 

<script>

</script>
<div class="left">
<div><img src="./images/checkbox.png" alt="1" id="aaa" onclick="checkboxImgfx(this)"/></div>
<i>反选</i>
<a href="#">删除选中产品</a>
<a href="#">移动到我的关注</a>
<a href="#">分享</a>
</div><!-- left -->
<div class="right">
<p>以选中&nbsp;<span>0</span>&nbsp;个产品</p>
<p>总价：<i>￥0.00</i></p>
<button>结账</button>
</div><!-- right -->
<div class="clear"></div>
</div><!-- amount -->
<div onclick="checkboxAll()">rtgr</div>

</body>
</html>

 css

 

.shop_cart_head>h4{font-size:14px;float:left;margin-top: 20px;}
.shop_cart_head>.right{float:right;margin-top: 20px;margin-bottom: 20px;}
.shop_cart_head>.right>select{border:1px solid #ccc;background-color:#fff;}
.shop_cart{border:1px solid #ccc;}
.shop_cart>.shop_cart_top{background-color:#e2e2e2;padding:10px 20px 4px 20px;border-bottom: 1px solid #ccc;height:60px;}

.shop_cart>.shop_cart_top>div{float:left;height:13px;13px;border:1px solid #ccc;position: relative;margin-top:12px;}
.shop_cart>.shop_cart_top>div>img{position: absolute;left:-2px;top:-4px;}
.shop_cart>.shop_cart_top>h5{float:left;margin-left: 10px;margin-top:12px;}
.shop_cart>.shop_cart_top>h6{float:left;margin-left: 156px;margin-top:12px;}
.shop_cart>.shop_cart_top>ol{float:right;margin-right:60px;margin-top: 10px;}
.shop_cart>.shop_cart_top>ol>li{display: inline-block;margin-left: 90px;}
/* 购物车列表 */
/* 左部分 */
.shop_cart_list>ul{padding:0px 20px;margin-bottom:0px;}
.shop_cart_list>ul>li{border-bottom:1px solid #ccc;}
.shop_cart_list>ul>li:last-child{border-bottom:0px;}
.shop_cart_list>ul>li>.list_left{float:left;}
.shop_cart_list>ul>li>.list_left>div{float:left;margin-top: 72px;height:13px;13px;border:1px solid #ccc;position: relative;}
.shop_cart_list>ul>li>.list_left>div>img{position: absolute;left:-2px;top:-4px;}
.shop_cart_list>ul>li>.list_left>img{float:left;120px;height: 120px;margin:20px 10px;}
.shop_cart_list>ul>li>.list_left>h6{display: inline-block;color:#666;margin-top: 30px;margin-bottom: 6px;}
.shop_cart_list>ul>li>.list_left>strong{color:#666;display:block;}
.shop_cart_list>ul>li>.list_left>p{color:#999;margin-top: 6px;margin-bottom: 4px;}
/* 右部分 */
.shop_cart_list>ul>li>.list_right{float:right;padding:60px 20px 40px 0px;}
.shop_cart_list>ul>li>.list_right>i{font-style: normal;margin-right:64px;float:left;display:block;margin-top:22px;}
.shop_cart_list>ul>li>.list_right>.pro_number_btn{margin-right:47px;display: inline-block;border:1px solid #d3d3d3;color:#999;float:left;display:block;margin-top:19px;}
.shop_cart_list>ul>li>.list_right>.pro_number_btn>button{background-color:#f0f0f0;20px;height:20px;border-left:1px solid #d3d3d3;}
.shop_cart_list>ul>li>.list_right>.pro_number_btn>button:first-child{background-color: #e2e2e2;border-left:0px;border-right:1px solid #d3d3d3;}
.shop_cart_list>ul>li>.list_right>.pro_number_btn>input{text-align: center;background-color:#f0f0f0;40px;border:0px;}
.shop_cart_list>ul>li>.list_right>b{font-weight: normal;margin-right:50px;float:left;display:block;70px;text-align:center;margin-top:20px;}
.shop_cart_list>ul>li>.list_right>.cart_btn{display: inline-block;float:left;display:block;margin-top:6px;}
.shop_cart_list>ul>li>.list_right>.cart_btn>button{display:block;background-color:#f0f0f0;margin-bottom: 10px;}
/* 结账部分 */
.amount{color:#666;background-color:#dedede;margin-top: 20px;margin-bottom: 30px;padding-left:20px;border:1px solid #ccc;}
.amount>.left{float:left;margin-top: 14px;}
.amount>.left>div{float:left;height:13px;13px;border:1px solid #ccc;position: relative;margin-top:4px;}
.amount>.left>div>img{position: absolute;left:-2px;top:-4px;}
.amount>.left>i{display:block;float:left;font-style: normal;font-size: 14px;margin-left: 10px;}
.amount>.left>a{display:block;float:left;color:#666;font-size: 14px;margin-left:20px;}
.amount>.right{float:right;}
.amount>.right>p{display: inline-block;font-size: 14px;margin-right: 20px;}
.amount>.right>p>i{font-style:normal;color:#cc0000;font-size: 18px;}
.amount>.right>button{background-color: #cc0000;font-size: 18px;height:50px;line-height:50px;padding:0px 28px;color:#fff;}
.page_btn{padding-bottom:30px;}

/* 搜索框 */
header .header_cont .input_search{margin-left:456px;}