欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生JS 购物车及购物页面的cookie使用方法

程序员文章站 2022-05-14 19:11:43
直接上代码:

直接上代码:

<!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{}
.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.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcelement;

// 添加到购物车
if(target.tagname.tolowercase() === 'button'){

// 获取当前li
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="images/shirt_1.jpg">
<p>短袖衬衣</p>
<p class="price">98.88</p>
<div class="add2cart">
<button>添加到购物车</button>
</div>
</li>
<li data-guid="g02">
<img src="images/shirt_2.jpg">
<p>短袖衬衣2</p>
<p class="price">88.88</p>
<div class="add2cart">
<button>添加到购物车</button>
</div>
</li>
<li data-guid="g03">
<img src="images/shirt_3.jpg">
<p>短袖衬衣3</p>
<p class="price">9.98</p>
<div class="add2cart">
<button>添加到购物车</button>
</div>
</li>
<li data-guid="g04">
<img src="images/shirt_4.jpg">
<p>短袖衬衣4</p>
<p class="price">8.88</p>
<div class="add2cart">
<button>添加到购物车</button>
</div>
</li>
</ul>
<a href="04car.html" rel="external nofollow" >去结算</a>
</body>
</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;}
#carlist li .btn-close{position:absolute;top:0;right:0;padding:0 5px;cursor:default;}
#carlist li .btn-close:hover{color:#fff;}
.subprice{padding:5px 20px;color:#f00;font-weight:bold;text-align:right;}
#carlist .price{color:#f00;}
.price::before{
content:'¥';
font-size:11px;
}
#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;

if(carlist){
var ul = document.createelement('ul');
for(var i=0;i<carlist.length;i++){
var li = document.createelement('li');
// 给每个li添加data-guid属性
li.setattribute('data-guid',carlist[i].guid);

// 商品名
var title = document.createelement('h4');
title.innerhtml = carlist[i].name;

// 商品价格
var price = document.createelement('p');
price.classname = 'price';
price.innerhtml = carlist[i].price + '×' + carlist[i].qty;

// 商品图片
var img = document.createelement('img');
img.src = carlist[i].imgurl;

// 添加删除按钮
var btnclose = document.createelement('span');
btnclose.innerhtml = '×';
btnclose.classname = 'btn-close';

// 计算总价
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.onclick = function(e){
e = e || window.event;
var target = e.target || e.srcelement;

// 是否点击了删除按钮
if(target.classname === 'btn-close'){
var currentli = target.parentelement;

// 获取当前guid
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);
}
}

// 清空购物车
// 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">

</div>
<div class="subprice"></div>
<a href="#" rel="external nofollow" id="btnclear">清空购物车</a>
</body>
</html>

以上这篇原生js 购物车及购物页面的cookie使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。