核心提示：1.cart.js页面 购物车页面!DOCTYPE htmlhtmlheadmeta charset=UTF-8titlecart/title!--引入bootstrap.css--link rel=...
1.cart.js页面 购物车页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cart</title>
<!--引入bootstrap.css-->
<link rel="stylesheet" type="text/css" href="../../bootstrap/css/bootstrap.css"/>
<!--引入myscss.css-->
<link rel="stylesheet" type="text/css" href="../../css/myscss.css" />
<!--引入jquery.js-->
<script type="text/javascript" src="../../bootstrap/js/jquery-3.1.1.js"></script>
<!--bootstrap.js-->
<script type="text/javascript" src="../../bootstrap/js/bootstrap.js"></script>
<!--head.js-->
<script type="text/javascript" src="../common/head.js"></script>
<!--cart.js-->
<script type="text/javascript" src="cart.js"></script>
</head>
<body>
<!--公用头部-->
<p id="navhead"></p>
<!--主体部分-->
<p class="container">
<p class="row">
<p class="col-md-1"></p>
<p class="col-md-10">
<!--content头部图片-->
<img src="../../img/otherimages/buy1.gif" />
<!--content中的table-->
<p class="panel panel-info margintop">
<p class="panel-heading text-center"><h4><strong>购物车列表</strong></h4></p>
<p id="cartable">
<!--<table class="table text-center">
<tr class="danger">
<th class="text-center">序号</th>
<th class="text-center">商品名称</th>
<th class="text-center">价格</th>
<th class="text-center">购买数量</th>
<th class="text-center">库存</th>
<th class="text-center">小计</th>
</tr>
<tr>
<td>0</td>
<td>Java模式</td>
<td>21.5</td>
<td><a class='glyphicon glyphicon-minus-sign' onclick='subBuyNum(this)'></a>1<a class='glyphicon glyphicon-plus-sign' onclick='addBuyNum(this)'></a></td>
<td>100</td>
<td>21.5</td>
</tr>
<tr>
<td>1</td>
<td>javascript</td>
<td>18.5</td>
<td>1</td>
<td>100</td>
<td>18.5</td>
</tr>
</table>-->
</p>
<p class="panel-footer clearfix"><span class="pull-right">总计</span></p>
</p>
</p>
<p class="col-md-1"></p>
</p>
</p>
</body>
</html>
2.cart.js代码 实现动态修改购买条数和总计
//购物车动态添加购物车信息
$(function(){
//1.从localStorage获取购物信息
var books = localStorage.getItem("carts");
var bookArr = JSON.parse(books);//将获取到的字符串存放进数组中
//2.声明一个html用来拼接页面
var html = "";
html += "<table id='cart' class='table 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><a class='glyphicon glyphicon-minus-sign' onclick='subBuyNum(this)'></a>"+abook.buynum+"<a class='glyphicon glyphicon-plus-sign' onclick='addBuyNum(this)'></a></td>";
html += "<td>"+abook.num+"</td>";
html += "<td>"+abook.price*abook.buynum+"</td>";
html += "</tr>";
}
html += "</table>";
$("#cartable").html(html);
});
//点击减号按钮
function subBuyNum(caller){
calFunction(caller,"sub");
}
//点击加号按钮
function addBuyNum(caller){
calFunction(caller,"add");
}
//优化代码
function calFunction(caller,tag){
//得到当前调用者的父节点
var $parent = $(caller).parent();
//找到父节点的文本信息
var buyNum = parseInt($parent.text());
//判断当前是+还是-
if(tag == "sub"){
//减号
if(buyNum>=2){
buyNum--;
}
}
//加号
else{
buyNum++;
}
//4.拼接html信息,把html放到parent中
var html = "";
html += "<a class='glyphicon glyphicon-minus-sign' onclick='subBuyNum(this)'></a>"+buyNum+"<a class='glyphicon glyphicon-plus-sign' onclick='addBuyNum(this)'></a>";
$parent.html(html);
//5.找到价格元素的信息
var $price = $parent.prev();
var price = parseFloat($price.text());
//6.修改小计元素的信息
var $lastB = $parent.next().next();
$lastB.text(price*buyNum);
//7.修改总计元素的信息
calTotal();
//8.修改本地购物车的数量
//8.1找到序号数列
var $first = $parent.parent().children(":first-child");
var n = parseInt($first.text());
modiyBuyNum(n,buyNum);
}
//计算当前购物车的总价格
function calTotal(){
var $totalPrice = $("#totalprice");
//找到table里面的tbody,其实table的所有正文信息都放在tbody里面
var $table = $("#cart").children();
var $children = $table.children(":not(:first)");
var $rowprices = $children.children(":last-child");
var totalp = 0;
$rowprices.each(function(){
var p = parseFloat($(this).text());
totalp += p;
})
$totalPrice.text("总计:"+totalp);
}
//页面一载入就计算总计购物车的总价信息
$(function(){
calTotal();
})
//修改本地购物车的数量
function modiyBuyNum(idx,buynum){
//1.获取本地购车的数据(字符串)
var books = localStorage.getItem("carts");
//2.把字符串转换为数组对象
var bookArr = JSON.parse(books);
//3.从数组中获取指定idx的数据
var abook = bookArr[idx];
//4.修改这条数据
abook.buynum = buynum;
//5.重新保存购物车
var booksStr = JSON.stringify(bookArr);
localStorage.setItem("carts",booksStr);
}
3.效果图片
