购物栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>商品列表页面</title>
<!--商品列表样式表-->
<link rel="stylesheet" type="text/css" href="../css/index.css" />
<!--cookie操作的js库-->
<script src="../js/cookie.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="container">
<h1>商品列表</h1>
<div class="mycar">
<a href="cart.html">我的购物车</a><i id="ccount">0</i>
</div>
<div class="list">
<dl pid="1001">
<dt>
<img src="../images/p1.jpg" />
</dt>
<dd>智能手表</dd>
<dd>酷黑，棒，棒，棒，棒</dd>
<dd>￥<span>998</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
<dl pid="1002">
<dt>
<img src="../images/p2.jpg" />
</dt>
<dd>智能手机001</dd>
<dd>金红色，酷酷酷酷</dd>
<dd>￥<span>1998</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
<dl pid="1003">
<dt>
<img src="../images/p3.jpg" />
</dt>
<dd>华为手机002</dd>
<dd>帅帅帅帅帅帅帅帅帅帅</dd>
<dd>￥<span>998</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
<dl pid="1004">
<dt>
<img src="../images/p4.jpg" />
</dt>
<dd>华为手机003</dd>
<dd>杠杠的</dd>
<dd>￥<span>2000</span></dd>
<dd>
<button>添加购物车</button>
</dd>
</dl>
</div>
</div>
<!--
描述：数据访问层，操作本地数据的模块
-->
<script type="text/javascript" src="../js/server.js"></script>
<!--
描述：本页面的js操作
-->
<script type="text/javascript" src="../js/index.js"></script>
</body>
</html>/*
功能：查看本地数据中是否含有指定的对象（商品），根据id
参数：id：商品的标识
*/
function checkObjByPid(id) {
var jsonStr = cookieObj.get("datas");
var jsonObj = JSON.parse(jsonStr);
var isExist = false;
for(var i = 0, len = jsonObj.length; i < len; i++) {
if(jsonObj[i].pid == id) {
isExist = true;
break;
}
}
return isExist; //return false;
}
/*
功能：更新本地数据
参数：arr 数组对象
返回一个值：最新的本地转换后的数组对象
* */
function updateData(arr) {
var jsonStr = JSON.stringify(arr);
cookieObj.set({
name: "datas",
value: jsonStr
});
jsonStr = cookieObj.get("datas");
return JSON.parse(jsonStr);
}
/*
获取商品的总数量
返回：数字
*/
function getTotalCount() {
/*循环遍历数组，获取每一个对象中的pCount值相加总和*/
var totalCount = 0; //默认为0
var jsonStr = cookieObj.get("datas");
var listObj = JSON.parse(jsonStr);
for(var i = 0, len = listObj.length; i < len; i++) {
totalCount = listObj[i].pCount + totalCount;
}
return totalCount;
}
/*
更新本地数据根据pid
id:商品的标识
*/
function updateObjById(id, num) {
var jsonStr = cookieObj.get("datas");
var listObj = JSON.parse(jsonStr);
for(var i = 0, len = listObj.length; i < len; i++) {
if(listObj[i].pid == id) {
listObj[i].pCount = listObj[i].pCount + num;
break;
}
}
return updateData(listObj)
}
/*
获取本地数据
返回 数组对象
* */
function getAllData() {
var jsonStr = cookieObj.get("datas");
var listObj = JSON.parse(jsonStr);
return listObj;
}
function deleteObjByPid(id) {
var lisObj = getAllData();
for(var i = 0, len = lisObj.length; i < len; i++) {
if(lisObj[i].pid == id) {
lisObj.splice(i, 1);
break;
}
}
updateData(lisObj);
return lisObj;
}
