原生JS 购物车及购物页面的cookie使用方法
程序员文章站
2022-11-26 12:34:56
直接上代码:
直接上代码:
<!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使用方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
上一篇: 壬寅宫变到底是什么样的 为什么宫女会冒着危险的暗杀皇帝呢
下一篇: JS实现图片手风琴效果