购买页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<a href="car.html" style="margin-top:20px" class="btn btn-success pull-right">
<span id="" class="glyphicon glyphicon-shopping-cart">
</span> 我的购物车
</a>
<div class="clearfix">
</div>
<hr />
<table style="margin-top: 20px;" border="" class="table table-hover table-bordered table-striped" cellspacing="" cellpadding="">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>操作</th>
</tr>
</table>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery3.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
<script type="text/javascript">
//商品信息
//测试
var product = [
{ bookId: 1, bookname: "往事随风", price: 58.00 },
{ bookId: 2, bookname: "道德经", price: 88.00 },
{ bookId: 3, bookname: "三生三世十里桃花", price: 69.00 },
{ bookId: 4, bookname: "大主宰", price: 50.00 },
{ bookId: 5, bookname: "全职高手", price: 50.00 },
{ bookId: 6, bookname: "哈哈哈?", price: 49.00 },
{ bookId: 7, bookname: "天下第一", price: 79.00 },
{ bookId: 8, bookname: "html+css", price: 79.00 },
{ bookId: 9, bookname: "php从入门到放弃", price: 79.00 },
{ bookId: 10, bookname: "mysql从删库到跑路", price: 69.00 }
];
for(let k = 0; k < product.length; k++) {
var str = `<tr>
<td>${product[k].bookId}</td>
<td>${product[k].bookname}</td>
<td>¥:${product[k].price}.00</td>
<td>
<a href="javascript:void(0)" onclick="addCar(${k})" class="btn btn-danger btn-xs">加入购物车</a>
</td>
</tr>`;
$(".table").append(str);
}
// 去cookie 读取数据
var arr;
// 点击加入购物车
if(document.cookie == "") {//当cookie里面没有商品
console.log(document.cookie);
arr = [];
} else {
console.log(document.cookie);
//处理COOKIE数据
arr = document.cookie.split(";")
var data = arr[0].split("=");
var str = data[1];
var bookinfo = eval("(" + str + ")");//转为json对象
console.log(bookinfo);
arr = bookinfo;
for(var j = 0; j < arr.length; j++) {
product[arr[j].bookId - 1].count = arr[j].count;//使原始数据里面的count数量继承已经添加的数量
}
console.log(arr)
}
function addCar(id) {//定义增加商品数量
var item = product[id];
if(item.count == undefined) {
item.count = 1;//添加一个表示数量的字段
arr.push(item); // 第一次
} else {//点击增加商品时候
item.count++;
for(var jj in arr) {
if(arr[jj].bookId == item.bookId) {
arr[jj].count = item.count//使自加后的数量跟生成的数组里面商品数量同步
}
}
}
console.log(item)
// 存入到cookie
var str = JSON.stringify(arr)
// 设置cookie的声明周期
var date = new Date();
var currentTime = date.getTime(); //毫秒
var lifeTime = currentTime + 10000 * 1000 // 保存30秒24*3600*
date.setTime(lifeTime); // 设置声明周期
document.cookie = "item=" + str + ";expires=" + date.toGMTString();
}
</script>
</html>购物车页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<h2 class="text-center">我的购物车</h2>
<hr />
<a href="shop.html" style="margin-top:20px" class="btn btn-success pull-right text-danger">
<span id="" class="glyphicon glyphicon-home text-danger">
</span> 继续购物
</a>
<div class="clearfix">
</div>
<hr />
<table style="margin-top: 20px;" border="" class="table table-hover table-bordered table-striped" cellspacing="" cellpadding="">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>商品价格</th>
<th>
商品数量
</th>
<th> 总价</th>
<th>操作</th>
</tr>
</table>
<hr />
<h3 class="pull-left">商品总价：</h3> <button id="zong" class="btn btn-danger btn-lg">去结算</button>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery3.min.js" type="text/javascript" charset="utf-8"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="js/bootstrap.min.js"></script>
</body>
<script type="text/javascript">
// 去cookie 读取数据
var sum = null;
var arr = document.cookie.split(";");
var data = arr[0].split("=");
var str = data[1];
var bookinfo = eval("(" + str + ")");
console.log(bookinfo);
for(k in bookinfo) {
var tprice = bookinfo[k].count * bookinfo[k].price;
sum += tprice;
var str = `<tr class='book'>
<td>${bookinfo[k].bookId}</td>
<td>${bookinfo[k].bookname}</td>
<td>${bookinfo[k].price}</td>
<td>${bookinfo[k].count}</td>
<td>${tprice}</td>
<td>
<a href="javascript:;" class="shanchu btn btn-danger btn-xs">移除</a>
</td>
</tr>`
$(".table").append(str);
// $(".shanchu").eq(k).data("bookId", bookinfo[k].bookId)
}
$("#zong").click(function() {
if(sum == null) {
sum = 0
}
var tt = confirm("共需支付￥" + sum + "元，点击确认付款！");
if(tt) {
if(sum == 0) {
alert("不买点个锤子!")
} else {
alert("不给钱点个锤子!")
}
} else {
if(sum == 0) {
alert("不买点个锤子!")
} else {
alert("没钱点个锤子!")
}
}
})
$(".shanchu").click(function() {
bookinfo.splice($(this).parents(".book").index() - 1, 1);
// 存入到cookie
var str = JSON.stringify(bookinfo)
// 设置cookie的声明周期
var date = new Date();
var currentTime = date.getTime(); //毫秒
var lifeTime = currentTime + 100 * 1000 // 保存30秒24*3600*
date.setTime(lifeTime); // 设置声明周期
document.cookie = "item=" + str + ";expires=" + date.toGMTString();
location.reload();
})
</script>
</html>