h5-localstorage-购物车

来源：互联网发布：centos php服务器搭建编辑：程序博客网时间：2024/06/05 01:59

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ margin:0; padding:0;}
a{ color:#03C;}
.shopCar{ width:600px; height:200px; background:#ccc; margin:0 auto;}
em{ font-style:nomal;}
</style>
<script src="jquery-1.11.0.min.js"></script>
<script src="hu.js"></script>
<script>
$(function(){
(function(){
var data=[
{'proid':100,'proname':'联想1','proprice':100},
{'proid':101,'proname':'联想2','proprice':1000},
{'proid':102,'proname':'联想3','proprice':10000},
{'proid':103,'proname':'联想4','proprice':10000}
];
var str='';
for(var i=0,j=data.length;i<j;i+=1){
str+='<li><span>'+ data[i].proid +'</span><span>'+ data[i].proname +'</span><span>'+ data[i].proprice +'</span><p><em>-</em><input type="text" value="1"><em>+</em></p><a id='+ data[i].proid+' href="javascript:;">加入购物车</a></li>';
}
$('.ullbox').empty().html(str);
var str3='';
var flag=cart.judge();
//判断本地数据是否为空
if(flag==null){

}else{
//不为空就往本地取数据
var productlist=cart.getproductlist();//取出购物车商品
for(var i=0,j=productlist.length;i<j;i++){
str3+='<li>'+productlist[i].id+' + '+productlist[i].name+' + <input type="text" id='+ productlist[i].id +' value='+ productlist[i].num+ '> + '+productlist[i].price+'<a id='+ productlist[i].id +'>删除</a></li>'}
$('.carbox').html(str3);
}
$('.ullbox').find('a').each(function(_index){
$(this).on('click',function(){
var product={
'id': $(this).attr('id'), //属性名用引号括起来，属性间由逗号隔开
'name': $(this).parent().find('span').eq(1).html(),
'num': $(this).parent().find('input').val(),
'price':$(this).parent().find('span').eq(2).html()
};
cart.addproduct(product);
var productlist=cart.getproductlist();//取出购物车商品
var str2=''
for(var i=0,j=productlist.length;i<j;i++){
str2+='<li>'+productlist[i].id+' + '+productlist[i].name+' + <input type="text" id='+ productlist[i].id +' value='+ productlist[i].num+ '> + '+productlist[i].price+'<a id='+ productlist[i].id +'>删除</a></li>'
}
$('.carbox').html(str2);
$('.carbox').find('a').each(function(_index){
$('.carbox').find('a').eq(_index).on('click',function(){
var pramint=$(this).attr('id')
cart.deleteproduct(pramint);
$(this).parent().remove();
})
})
$('.carbox').find('input').each(function(_index){
$('.carbox').find('input').eq(_index).on({
blur: function(){
var pramList={
updete_id:$(this).attr('id'),
updete_num:$(this).val()

};
cart.updateproductnum(pramList.updete_id,pramList.updete_num);
},
focus: function(){
}
})

})
})
})
$('.carbox').find('a').each(function(_index){
$('.carbox').find('a').eq(_index).on('click',function(){
var pramint=$(this).attr('id')
cart.deleteproduct(pramint);
$(this).parent().remove();
})
})
$('.carbox').find('input').each(function(_index){
$('.carbox').find('input').eq(_index).on({
blur: function(){
var pramList={
updete_id:$(this).attr('id'),
updete_num:$(this).val()

};
cart.updateproductnum(pramList.updete_id,pramList.updete_num);
},
focus: function(){

}
})

})

})();

})
</script>
</head>

<body>
<ul class="ullbox">
</ul>
<div class="shopCar">
<ul class="carbox">
</ul>
<a href="www.baihui.com" target="_blank">去结算(去结算之后我这边暂时不做了并且你结算成功时候记得把我本地存储购物车里面那条数据删除)</a>
<div>
</body>

</html>

// JavaScript Document
utils = {
setParam : function (name,value){
localStorage.setItem(name,value)
},
getParam : function(name){
return localStorage.getItem(name)
}
}

product={
id:0,
name:"",
num:0,
price:0.00,
};
orderdetail={
username:"",
phone:"",
address:"",
zipcode:"",
totalNumber:0,
totalAmount:0.00
}
cart = {
//向购物车中添加商品
addproduct:function(product){
var ShoppingCart = utils.getParam("ShoppingCart");
if(ShoppingCart==null||ShoppingCart==""){
//第一次加入商品
var jsonstr = {"productlist":[{"id":product.id,"name":product.name,"num":product.num,"price":product.price}],"totalNumber":product.num,"totalAmount":(product.price*product.num)};
utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
}else{
var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
var productlist = jsonstr.productlist;
var result=false;
//查找购物车中是否有该商品
for(var i in productlist){
if(productlist[i].id==product.id){
productlist[i].num=parseInt(productlist[i].num)+parseInt(product.num);
result = true;
}
}
if(!result){
//没有该商品就直接加进去
productlist.push({"id":product.id,"name":product.name,"num":product.num,"price":product.price});
}
//重新计算总价
jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+parseInt(product.num);
jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+(parseInt(product.num)*parseFloat(product.price));
orderdetail.totalNumber = jsonstr.totalNumber;
orderdetail.totalAmount = jsonstr.totalAmount;
//保存购物车
utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
}
},
//修改给买商品数量
updateproductnum:function(id,num){
var ShoppingCart = utils.getParam("ShoppingCart");
var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
var productlist = jsonstr.productlist;

for(var i in productlist){
if(productlist[i].id==id){
jsonstr.totalNumber=parseInt(jsonstr.totalNumber)+(parseInt(num)-parseInt(productlist[i].num));
jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)+((parseInt(num)*parseFloat(productlist[i].price))-parseInt(productlist[i].num)*parseFloat(productlist[i].price));
productlist[i].num=parseInt(num);

orderdetail.totalNumber = jsonstr.totalNumber;
orderdetail.totalAmount = jsonstr.totalAmount;
utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
return;
}
}
},
//判断用户进入页面本地数据是否存在
judge:function(){
var ShoppingCart = utils.getParam("ShoppingCart");
return ShoppingCart;
},
//获取购物车中的所有商品
getproductlist:function(){
var ShoppingCart = utils.getParam("ShoppingCart");
var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
var productlist = jsonstr.productlist;
orderdetail.totalNumber = jsonstr.totalNumber;
orderdetail.totalAmount = jsonstr.totalAmount;
return productlist;
},
//判断购物车中是否存在商品
existproduct:function(id){
var ShoppingCart = utils.getParam("ShoppingCart");
var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
var productlist = jsonstr.productlist;
var result=false;
for(var i in productlist){
if(productlist[i].id==product.id){
result = true;
}
}
return result;
},
//删除购物车中商品
deleteproduct:function(id){
var ShoppingCart = utils.getParam("ShoppingCart");
var jsonstr = JSON.parse(ShoppingCart.substr(1,ShoppingCart.length));
var productlist = jsonstr.productlist;
var list=[];
for(var i in productlist){
if(productlist[i].id==id){
jsonstr.totalNumber=parseInt(jsonstr.totalNumber)-parseInt(productlist[i].num);
jsonstr.totalAmount=parseFloat(jsonstr.totalAmount)-parseInt(productlist[i].num)*parseFloat(productlist[i].price);
}else{
list.push(productlist[i]);
}
}
jsonstr.productlist = list;
orderdetail.totalNumber = jsonstr.totalNumber;
orderdetail.totalAmount = jsonstr.totalAmount;
utils.setParam("ShoppingCart","'"+JSON.stringify(jsonstr));
}
};

1 0