1.category.html页面:显示书籍信息页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />
<!--导入category.js文件-->
<script src="category.js"></script>
<title></title>
</head>
<body>
<div class="container">
<ol class="breadcrumb">
<li><a href="home.html">首页</a></li>
<li><a id="navpath" href="#">全部商品</a></li>
</ol>
</div>
<div class="container">
<div style="margin-left: 100px;margin-right: 100px;background: red;">
<img src="../../img/otherimages/productlist.gif" style="width: 100%;height: 40px;" />
<div class="thumbnail text-center pull-left" style="margin: 15px;">
<img src="../../img/bookimage/20285763-1_b.jpg" />
<p>书名:JAVA模式</p>
<p>售价:21.5</p>
<input type="image" onclick="addCart('10000','Java模式','21.5','100')" src="../../img/otherimages/buybutton.gif"/>
</div>
<div class="thumbnail text-center pull-left" style="margin: 15px;">
<img src="../../img/bookimage/20412979-1_b.jpg" />
<p>书名:javascript</p>
<p>售价:18.5</p>
<input type="image" onclick="addCart('10001','javascript','18.5','100')" src="../../img/otherimages/buybutton.gif"/>
</div>
</div>
</div>
<div class="container">
<nav class="text-center">
<ul class="pagination text-center" >
<li><a href="#"><span>«首页</span> </a></li>
<li><a href="#">上一页</a></li>
<li><a href="#">下一页</a></li>
<li><a href="#"> <span>末页»</span></a></li>
<span style="line-height: 30px;margin-left: 10px;">3/15</span>
</ul>
</nav>
</div>
</body>
</html>
2.category.js文件,实现添加购物车功能
//截取url
//动态改变路径导航的信息
$(function(){
var url = window.location.search;
url = decodeURI(url);
var subs = url.substr(url.indexOf("category=")+9);
$("#navpath").html(subs);
})
//购物车思路:
//1、本地购物车 京东 不要登录一样可以加购物车,结算的时候才需要登录
//2、服务器购物车 淘宝 一定要登录才能添加购物车
//本地购物车:把添加到购物车的数据保存到浏览器中(localStorage)
//方法传参:书的id,书名,书售价,书的库存
//在保存到localStorage的时候,需要先把js对象转换为字符串再保存(localStorage只能够保存字符串)
function addCart(id,name,price,num){
//1.创建一个js对象
var book = {
"product_id":id, //书的id
"name":name, //书名
"price":price, //售价
"num":num, //库存
"buynum":1 //购买数量
}
//2.获取已经保存的 数据
var storebooks = localStorage.getItem("carts");
//将已经获取到的字符串数据转换成数组
var bookArr = JSON.parse(storebooks);
//2-1 如果购物车里面数据为空,说明从来没有保存过数据
if(bookArr==null){
//创建一个数组
var books = new Array();
//把要保存的数据存到数组中
books.push(book);
//将数组转换成字符串
var bookstr = JSON.stringify(books);
alert(bookstr);
//将字符串保存到localStorge中
localStorage.setItem("carts",bookstr);
}
//2-2 说明已经保存过数据了
else{
//1.判断我们将要保存的书籍是否已经存在购物车了,如果存在,则让购买数量+1
var isfind = false;
for(var i=0;i<bookArr.length;i++){
var b = bookArr[i];
if(b.product_id==book.product_id){
b.buynum++;
isfind = true;
break;
}
}
//2.如果不存在,则将该书添加到购物车列表中
if(isfind == false){
bookArr.push(book);
}
//3.把bookArr重新转换成字符串保存
var s = JSON.stringify(bookArr);
localStorage.setItem("carts",s);
}
alert("添加成功");
}
3.cart.html页面,购物车页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"><br />
<script src="../../js/bootstrap/js/jquery-3.1.1.js"></script>
<script src="../../js/bootstrap/js/bootstrap.js"></script>
<link rel="stylesheet" href="../../js/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="../common/head.css"/>
<script src="../common/head.js"></script>
<script src="cart.js"></script>
<title></title>
</head>
<body>
<div class="container">
<!--正文内容-->
<div style="margin-left: 100px;margin-right: 100px;">
<img src="../../img/otherimages/buy1.gif" />
<div class="panel panel-info table-responsive" style="margin-top: 30px;">
<div class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></div>
<div id="carttable"><!--这里动态添加购物车数据--></div>
<div class="panel-footer" style="padding-left: 90%;">总计:40</div>
</div>
<form class="form-horizontal">
<div class="form-group">
<label for="receiverAddress" class="col-md-1 control-label">地址</label>
<div class="col-md-4">
<input type="email" class="form-control" name="receiverAddress" id="receiverAddress" placeholder="请输入收货地址">
</div>
</div>
<div class="form-group">
<label for="receiverName" class="col-md-1 control-label">收货人</label>
<div class="col-md-4">
<input type="text" class="form-control" id="receiverName" name="receiverName" placeholder="请输入收货人姓名">
</div>
</div>
<div class="form-group">
<label for="receiverPhone" class="col-md-1 control-label">电话</label>
<div class="col-md-4">
<input type="text" class="form-control" id="receiverPhone" name="receiverPhone" placeholder="请输入收货人电话">
</div>
</div>
<div class="form-group">
<div class="col-md-12 text-right">
<a href="../book/home.html"><img src="../../img/otherimages/gwc_jx.gif"/></a>
<a href="#"><img src="../../img/otherimages/gwc_buy.gif"/></a>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
4.cart.js页面 实现购物车动态添加数据功能
//购物车表格动态加载本地购物车的信息
$(function(){
//1.从localstorge获取所存的购物车的信息
var books = localStorage.getItem("carts");
var bookArr = JSON.parse(books);
//2.声明一个html用来拼接页面
var html = "";
html += "<table class='table table-hover text-center'>";
html += " <tr class='danger'>";
html += " <th class='text-center'>序号</th>";
html += " <th class='text-center'>商品名称</th>";
html += " <th class='text-center'>价格</th>";
html += " <th class='text-center'>购买数量</th>";
html += " <th class='text-center'>库存</th>";
html += " <th class='text-center'>小计</th>";
html += " </tr>";
//3.遍历数组
for(var i=0;i<bookArr.length;i++){
//获取到一本书
var abook = bookArr[i];
html += "<tr>";
html += "<td>"+i+"</td>";
html += "<td>"+abook.name+"</td>";
html += "<td>"+abook.price+"</td>";
html += "<td>"+abook.buynum+"</td>";
html += "<td>"+abook.num+"</td>";
html += "<td>"+abook.price*abook.buynum +"</td>";
html += "</tr>";
}
html += " </table>";
$("#carttable").html(html);
})
5.效果显示