localStorage购物车（升级一下）

<!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>&yen;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>&yen;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>&yen;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>&yen;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>
秒客网

localStorage购物车（升级一下）

相关文章
