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>
<!--公用頭部-->
<div id="navhead"></div>
<!--主體部分-->
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<!--content頭部圖片-->
<img src="../../img/otherimages/buy1.gif" />
<!--content中的table-->
<div class="panel panel-info margintop">
<div class="panel-heading text-center"><h4><strong>購物車列表</strong></h4></div>
<div 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>-->
</div>
<div class="panel-footer clearfix"><span class="pull-right">總計</span></div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
</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.效果圖片
