标签：html javascript css cookie shopping cart
最近学原生的Javascript，需要弄个购物车的功能,下面是利用cookie做的一个演示
思路其实很简单，商品界面通过value获取对应的值，然后把这个商品的各种信息放入一个字典；因为有多个商品，把这些商品的字典对象都放在一个数组里面就行了。然后通过JSON序列化这个这个数组，保存在cookie里面。在购物车界面通过读取cookie获取这些信息，然后动态地创建一个表格显示即可。
商品界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物页面</title>
<style>
ul{list-style:none;padding:0;margin:0;}
.goods li{display:inline-block;border:1px solid #ddd;padding:10px;margin:10px;}
.goods li:hover{background-color:#efefef;}
.goods .price{color:#f00;font-weight:bold;}
.goods .price::before{
content:"￥";
}
</style>
<script>
window.onload = function(){
var goods = document.getElementsByClassName(‘goods‘)[0];
// 用于保存购物车商品信息
var carList = [];
// 先获取当前cookie
var cookies = document.cookie.split(‘; ‘);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(‘=‘);
if(arr[0] === ‘carlist‘){
carList = JSON.parse(arr[1]);
}
}
// 事件委托
goods.|| window.event;
var target = e.target || e.srcElement;
// 添加到购物车
if(target.tagName.toLowerCase() === ‘button‘){
// 获取当前li （Li-div-button)
var currentLi = target.parentElement.parentElement;
var children = currentLi.children;
var currentGUID = currentLi.getAttribute(‘data-guid‘);
// 先创建一个对象保存当前商品信息
var goodsObj = {};
goodsObj.guid = currentGUID;
goodsObj.qty = 1;
goodsObj.name = children[1].innerHTML;
goodsObj.price = children[2].innerHTML;
goodsObj.imgUrl = children[0].src;
// 如果cookie为空，则直接添加
if(carList.length===0){
// 添加到carList
carList.push(goodsObj);
}else{
// 先判断cookie中有无相同的guid商品
for(var i=0;i<carList.length;i++){
// 如果商品已经存在cookie中，则数量+1
if(carList[i].guid === currentGUID){
carList[i].qty++;
break;
}
}
// 如果原cookie中没有当前商品
if(i===carList.length){
// 添加到carList
carList.push(goodsObj);
}
}
// 存入cookie
// 把对象/数组转换诚json字符串：JSON.stringify()
document.cookie = ‘carlist=‘ + JSON.stringify(carList);
}
}
}
</script>
</head>
<body>
<ul class="goods">
<li data-guid="g01">
<img src="img/02.jpg">
<p>货物1</p>
<p class="price">98.88</p>
<div class="add2cart">
<button onclick="Favor(this);">添加到购物车</button>
</div>
</li>
<li data-guid="g02">
<img src="img/03.jpg">
<p>货物2</p>
<p class="price">88.88</p>
<div class="add2cart">
<button onclick="Favor(this);">添加到购物车</button>
</div>
</li>
<li data-guid="g03">
<img src="img/04.jpg">
<p>货物3</p>
<p class="price">9.98</p>
<div class="add2cart">
<button onclick="Favor(this);">添加到购物车</button>
</div>
</li>
<li data-guid="g04">
<img src="img/05.jpg">
<p>货物4</p>
<p class="price">8.88</p>
<div class="add2cart">
<button onclick="Favor(this);">添加到购物车</button>
</div>
</li>
</ul>
<a href="a2.html">去结算</a>
</body>
<script>
function Favor(ths){
// ths => this => 当前触发事件的标签
var top = 49;
var left = 71;
var op = 1;
var fontSize = 18;
var tag = document.createElement(‘span‘);
tag.innerText = ‘+1‘;
tag.style.position = ‘absolute‘;
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.fontSize = fontSize + ‘px‘;
ths.parentElement.appendChild(tag);
var interval = setInterval(function(){
top -= 10;
left += 10;
fontSize += 5;
op -= 0.1;
tag.style.top = top + "px";
tag.style.left = left + "px";
tag.style.opacity = op;
tag.style.fontSize = fontSize + ‘px‘;
if(op <= 0.2){
clearInterval(interval);
ths.parentElement.removeChild(tag);
}
}, 50);
}
</script>
</html>
购物车的界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<style>
#carList li{position:relative;padding-bottom:15px;margin-bottom:15px;border-bottom:1px solid #ddd;}
#carList img{display:block;width:100px;}
.btn-close{padding:0 5px;cursor:default;}
.btn-close:hover{background-color:#f00;color:#fff;}
.subPrice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}
#carList .price{color:#f00;}
table
{
margin-left: auto;
margin-right: auto;
}
.price::before{
content:‘￥‘;
font-size:11px;
}
/* Table Head */
/* Table Head */
#mytable th {
background-color: rgb(156, 186, 95);
color: #fff;
border-bottom-width: 1px;
}
/* Column Style */
#mytable td {
color: #000;
}
/* Heading and Column Style */
#mytable tr {
border-width: 1px;
border-style: solid;
border-color: rgb(156, 186, 95);
}
/* Padding and font style */
#mytable td {
padding: 5px 10px;
font-size: 12px;
font-family: Verdana;
font-weight: bold;
}
#carList .price span{font-size:11px;}
</style>
<script>
window.onload = function(){
/*
读取cookie中的carlist
把json字符串转换成对象/数组：JSON.parse()
json字符串格式：
1.必须用双引号
2.不能右注释
*/
var oCarList = document.getElementById(‘carList‘);
var oSubPrice = oCarList.nextElementSibling;
var btnClear = document.getElementById(‘btnClear‘);
var carList;
var cookies = document.cookie.split(‘; ‘);
for(var i=0;i<cookies.length;i++){
var arr = cookies[i].split(‘=‘);
if(arr[0] === ‘carlist‘){
console.log(JSON.parse(arr[1]));
carList = JSON.parse(arr[1]);
}
}
var subPrice = 0;
//动态的根据cookie的内容创建列表
if(carList){
var tableRef = document.getElementById(‘mytable‘).getElementsByTagName(‘tbody‘)[0];
console.log(tableRef);
// Insert a row in the table at the last row
for(var i=0;i<carList.length;i++) {
//插入一行
var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.setAttribute(‘data-guid‘,carList[i].guid)
//插入4列
var cell0 = newRow.insertCell(0);
var cell1 = newRow.insertCell(1);
var cell2 = newRow.insertCell(2);
var cell3 = newRow.insertCell(3);
var cell4 = newRow.insertCell(4);
// Append a text node to the cell
var title = document.createTextNode(carList[i].name);
cell0.appendChild(title);
var price = document.createTextNode(carList[i].price);
cell1.appendChild(price);
var number=document.createTextNode(carList[i].qty);
cell2.appendChild(number)
var img = document.createElement(‘img‘);
img.src = carList[i].imgUrl;
cell3.appendChild(img)
var btnClose = document.createElement(‘span‘);
btnClose.innerHTML = ‘删除‘;
btnClose.className = ‘btn-close‘;
cell4.appendChild(btnClose)
// 计算总价
subPrice += carList[i].price*carList[i].qty;
// li.appendChild(title);
// li.appendChild(price);
// li.appendChild(img);
// li.appendChild(btnClose);
// ul.appendChild(li);
}
// 写入页面
// oCarList.appendChild(ul);
// 写入总价
// toFixed(n)获取小数点后n位（自动四舍五入，Number类型的方法）
oSubPrice.innerHTML = ‘<span class="price">‘ + subPrice.toFixed(2) + ‘</span>‘;
}
// 删除商品
oCarList.|| window.event;
var target = e.target || e.srcElement;
// 是否点击了删除按钮
if(target.className === ‘btn-close‘){
var currentLi = target.parentElement.parentElement;
var currentGUID = currentLi.getAttribute(‘data-guid‘);
// 删除cookie中对应的商品
// 根据guid取对比
for(var i=0;i<carList.length;i++){
// 找出要删除的商品
if(carList[i].guid === currentGUID){
carList.splice(i,1);
break;
}
}
// 更新cookie
document.cookie = ‘carlist=‘ + JSON.stringify(carList);
// 删除li节点
currentLi.parentElement.removeChild(currentLi);
location.reload()
}
}
// 清空购物车
// 1、删除DOM节点
// 2、删除cookie
btnClear.onclick = function(){
oCarList.innerHTML = ‘‘;
oSubPrice.innerHTML = ‘‘;
// 利用设置有效期位过期事件来达到删除cookie的效果
var now = new Date();
now.setDate(now.getDate()-7);
document.cookie = ‘carlist=xx;expires=‘ + now;
}
}
</script>
</head>
<body>
<h1>我的购物车</h1>
<div id="carList">
<table id="mytable" width="100%" >
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th>照片</th>
<th>操作</th>
<tbody>
</tbody>
</table>
</div>
<div class="subPrice"></div>
<a href="#" id="btnClear">清空购物车</a>
<a href="index.html">继续购物</a>
</body>
</html>
cookie的内容
本文出自 “麻婆豆腐” 博客，请务必保留此出处http://beanxyz.blog.51cto.com/5570417/1926569
标签：html javascript css cookie shopping cart
原文地址：http://beanxyz.blog.51cto.com/5570417/1926569
