<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style type="text/css" media="screen">
th,td{
border:1px solid #ccc;
padding:0 50px;
height:30px;
line-height:30px;
text-align:center;
}
table{
border-collapse:collapse
}
.fl{
float:left;
margin-right:10px;
}
i{
font-style:normal;
}
.gouwuche{
width:100px;
height:50px;
border:1px solid #ccc;
margin-top:100px;
position:relative;
}
.list{
width:610px;
position:absolute;
top:50px;
left:0;
min-height:100px;
border:1px solid #ccc;
}
.list>div{
float:left;
width:100%;
height:30px;
}
.list>div>div{
float:left;
margin-right:0;
text-align:center;
height:100%;
width:120px;
border:1px solid #ccc;
}
</style>
</head>
<body>
<table style="border:1px solid #ccc">
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>商品数量</th>
<th>商品操作</th>
<th></th>
</tr>
<tr class="line">
<td>中裤衩</td>
<td>¥300</td>
<td>100</td>
<td>
<div class="de">
<div class="fl jian">
减
</div>
<i class="fl num">1</i>
<div class="fl jia">
加
</div>
</div>
</td>
<td>
<button type="" onclick="demo(this)" mingcheng="中裤衩" jiage="300" shuliang="100">加入购物车</button>
</td>
</tr>
<tr class="line">
<td>小裤衩</td>
<td>¥300</td>
<td>100</td>
<td>
<div class="de">
<div class="fl jian">
减
</div>
<i class="fl num">100</i>
<div class="fl jia">
加
</div>
</div>
</td>
<td>
<button type="" onclick="demo(this)" mingcheng="小裤衩" jiage="300" shuliang="100" >加入购物车</button>
</td>
</tr>
<tr class="line">
<td>姨妈巾</td>
<td>¥10</td>
<td>1000</td>
<td>
<div class="de">
<div class="fl jian">
减
</div>
<i class="fl num">1</i>
<div class="fl jia">
加
</div>
</div>
</td>
<td>
<button type="" onclick="demo(this)" mingcheng="姨妈巾" jiage="300" shuliang="1000" >加入购物车</button>
</td>
</tr>
<tr class="line">
<td>奶粉</td>
<td>¥10</td>
<td>1000</td>
<td>
<div class="de">
<div class="fl jian">
减
</div>
<i class="fl num">1</i>
<div class="fl jia">
加
</div>
</div>
</td>
<td>
<button type="" onclick="demo(this)" mingcheng="奶粉" jiage="300" shuliang="1000" >加入购物车</button>
</td>
</tr>
</table>
<div class="gouwuche">
<div class="result">
购物车商品类:
<i class="log">1</i>
<div class="list">
</div>
</div>
</div>
</body>
<script src="./jquery-3.1.1.min.js"></script>
<script>
$(".jian").click(function(){
var num=Number($(this).parent(".de").find(".num").text());
num--;
if(num<0){
alert("傻逼，已经不能再减了");
return false;
}
$(this).parent(".de").find(".num").text(num);
})
$(".jia").click(function(){
var num=Number($(this).parent(".de").find(".num").text());
num++;
$(this).parent(".de").find(".num").text(num);
})
function demo(obj){
var data=JSON.parse(localStorage.getItem("shangp"));
var nums=$(obj).parent().parent(".line").find(".num").text();//获取所选商品的数量;
var mingcheng=$(obj).attr("mingcheng");//获取商品名称
var shuliang=$(obj).attr("shuliang");//商品库存
var jiage=$(obj).attr("jiage");
//alert(jiage);
var dataLIst={"nums":nums,"shuliang":shuliang,"jiage":jiage};
if(data !=""&&data !=null&&data !=undefined && data !="undefined" && JSON.stringify(data)!="{}"){
data[mingcheng]=dataLIst;//
}else{
data={};
data[mingcheng]=dataLIst;
}
var re=JSON.stringify(data);
localStorage.setItem("shangp",re);
listPage();
}
function listPage(){
var log=0;
$(".list").html("");
var list=JSON.parse(localStorage.getItem("shangp"));
console.log(list);
var tip1="";
for(var i in list){
log++;
//console.log(i)
var jiage=list[i].jiage;
var kucun=list[i].shuliang;
var shuliang=list[i].nums;
tip1+='<div>'
+'<div>'
+'商品:'+i
+'</div>'
+'<div>'
+'价格:'+jiage
+'</div>'
+'<div>'
+'库存:'+kucun
+'</div>'
+'<div>'
+'所选数量:'+shuliang
+'</div>'
+'<div onclick="doit(this)" mingcheng='+i+'>'
+'删除'
+'</div>'
+'</div>'
}
if(log==0){
tip1="购物车没有数据";
}
$(".list").html(tip1)
$(".log").html(log);
}
function doit(r){
var mingcheng=$(r).attr("mingcheng");
var data=JSON.parse(localStorage.getItem("shangp"));
delete data[mingcheng];
localStorage.setItem("shangp",JSON.stringify(data));
listPage();
}
$(document).ready(function(){
listPage()
})
</script>
</html>
