js+cookie购物车，添加商品和查看购物车列表

最新推荐文章于 2024-09-05 23:05:05 发布
最新推荐文章于 2024-09-05 23:05:05 发布
阅读量235 收藏 2
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/orange-cccc/p/10097122.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>商品列表</title>
    <style>
        span{
            padding:10px;
        }
        li{
            list-style: none;
        }
        li span{
            width:150px;
            display: inline-block;
            text-align: center;
        }
    </style>
    <script src="../tools.js"></script>
</head>
<body>
    <div id="list">
         <ul>
             <li><span>编号</span><span>名称</span><span>单价</span><span><a href="javascript:0">操作</a></span></li>
             <li><span>1</span><span>绿箭</span><span>15</span><span><a href="javascript:0">添加购物车</a></span></li>
             <li><span>2</span><span>中华牙膏</span><span>19</span><span><a href="javascript:0">添加购物车</a></span></li>
             <li><span>3</span><span>小熊毛巾</span><span>39</span><span><a href="javascript:0">添加购物车</a></span></li>
             <li><span>4</span><span>枫叶手机</span><span>56</span><span><a href="javascript:0">添加购物车</a></span></li>
             <li><span>5</span><span>儿童手表</span><span>2400</span><span><a href="javascript:0">添加购物车</a></span></li>
             <li><span>6</span><span>植物唇膏</span><span>36</span><span><a href="javascript:0">添加购物车</a></span></li>         
         </ul>
    </div>
    <p>
        <a href="cartList.html"target="_blank">查看购物车</a>
    </p>
    <script>
        // 把事件委托给父级
        tools.on(tools.$("#list"),"click",function(e){
           e=e||window.event;
           var target = e.target || e.srcElement;
           if(target.className === "addMe"){
               //获取选中得内容
               var li = target.parentNode.parentNode;
               var obj={
                   id:li.children[0].innerHTml,
                   name:li.children[1].innerHTml,
                   price:li.children[2].innerHTml,
                   num:1
               };
               // 判断有无，存进cookie
               var arr = tools.cookie("cart")?JSON.parse(tools.cookie("cart")):[];
               var index;
               var isExist = arr.some(function(item,i){
                   //some满足条件返回true，查找结束
                   index = i;
                   return item.id === obj.id;
               })
               if(isExist){
                   arr[index].num++;
               }else{//不满足条件就添加进数组
                   arr.push(obj);
               }
           }
        })
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../tools.js"></script>
    <style>
        *{ margin:0; padding:0; font-size:14px}
        #box{ width:500px; margin:100px auto}
        table,th,td{ border:1px solid #000; border-collapse:collapse}
        td,th{ width:100px; height:30px; padding:10px}
        input[type="text"]{ display:none; height:24px; width:60px; border:1px solid #ccc;}
        tbody tr td:first-child{text-align: center;}
        tfoot td{text-align: right;}
        .editBtn{ color:#666}
        .delBtn{ color:red}
        .okBtn,.cancelBtn{ display:none}
        
        .edit span{ display:none}
        .edit input[type="text"]{ display:inline-block}
        .edit .editBtn,.edit .delBtn{ display:none}
        .edit .okBtn,.edit .cancelBtn{ display:inline}
        </style>
        
</head>
<body>
    <div id="box">
        <table>
            <thead>
                <tr>
                    <th><label>全选：<input type="checkbox" id="allCheck"/></label></th>
                    <th>编号</th>
                    <th>名称</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th>编辑</th>
                </tr>
            </thead>
            <tbody>
                <!--<tr>
                    <td><input type="checkbox" class="check"/></td>
                    <td><span>张三</span><input type="text"></td>
                    <td><span>18</span><input type="text"></td>
                    <td><span>1</span><input type="text"></td>
                    <td>
                        <a href="javascript:;" class="editBtn">编辑</a>
                        <a href="javascript:;" class="okBtn">确定</a>
                        <a href="javascript:;" class="cancelBtn">取消</a>
                        <a href="javascript:;" class="delBtn">删除</a>
                    </td>
        
                </tr>-->
                
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="6">总价：￥<b id="money"></b></td>
                </tr>
            </tfoot>
       </table>
    </div>

    <script>
       var box = tools.$("#box");
       var table = tools.$("table",box)[0];
       var tbody = tools.$("tbody",box)[0];
       // 通过cookie拼接购物车
       var arr = JSON.parse(tools.cookie("cart"));
       var str = "";
       for(var a of arr){
           str += '<tr>'+
                  '<td><input type="checkbox" class="check"/></td>'+
                  '<td>'+a.id+'</td>'+
                  '<td><span>'+a.name+'</span></td',
                  '<td><span>'+a.price+'</span></td>',
                  '<td><span>'+a.num+'</span></td>',
                  '<td>'+
                      '<a href="javascript:;" class="editBtn">编辑</a>'+
                      '<a href="javascript:;" class="editBtn">确定</a>'+
                      '<a href="javadcript:;"'
                  '</td>'+
                  '</tr>';
       }
       tbody.innerHTML = str;
       var allCheck = tools.$("#allCheck");
       var n=0;

       table.onclick = function(e){
           e = e||event;
           var target=e.target||e.srcElement;
           var tr = target.parentNode.parentNode;
           if(target.className ="editBtn"){
               tr.className="edit";
               var aSpan = tools.$("span",tr);
               for(var i=0;i<aSpan.length;i++){
                   aSpan[i].nextElementSibling.value = aSpan[i].innerHTML;
               }
           }else if(target.className === "okBtn"){
               tr.className = "";
               var aSpan = tools.$("span",tr);
               for(var i= 0 ;i<aSpan.length;i++){
                   aSpan[i].innerHTML=aSpan[i].nextElementSibling.value;
               }
           }else if(target.className === "cancelBtn"){
               // 取消
               tr.className = "";
           }else if(target.className === "delBtn"){
               if(confirm("确定删除？")){
                   tr.parentNode.removeChild(tr);
                   var check = tools.$(".check",tr)[0];
                   if(check.checked) n--;
                   allCheck.checked = (n===tools.$(".check",box).length);
                   calcPrice();
               }
           }
           else if(target.id === "allcheck"){
               // 全选
               var aCheck = tools.$(".check",box);
               for(var i = 0;i<aCheck.length;i++){
                 aCheck[i].checked = target.checked;   
               }
               n = target.checked?aCheck.length : 0;
               calcPrice();
           }else if(target.className === "check"){
               target.checked ? n++ : n--;
               var aCheck = tools.$(".check",box);
               allCheck.checked = n === aCheck.length;
               calcPrice();
           }
       }
       function calcPrice(){
           var sum = 0;
           var aTr = tools.$("tr",tbody);
           for(var j=0;j<aTr.length;j++){
               if(tools.$(".check",aTr[j])[0].checked){
                   var price = Number(tools.$("span",aTr[j])[1].innerHTML);
                   var num = Number(tools.$("span"),aTr[j][2].innerHTML);
                   sum += price*num;
               }
           }
           tools.$("#money").innerHTML = sum + "元"；
       }
    </script>
</body>
</html>
// tools.js/文件

var tools = {
	/* 查找DOM对象
	 * @param selector string css基本选择器
	 * @param [parent] DOMobj 父级元素对象
	 * @return   DOMobj || HTMLCollection
	 */
	$: function(selector ,parent){
		parent = parent || document;
		switch(selector.charAt(0)){
			case "#":
				return document.getElementById(selector.slice(1));
			case ".":
				return parent.getElementsByClassName(selector.slice(1));
			default:
				return parent.getElementsByTagName(selector);
		}
	},
	
	/*获取外部样式
	 * @param obj  DOMobj 要获取属性的DOM对象 
	 * @param attr string 获取某一条属性的属性名
	 * @return  string  obj的attr属性值
	 */
	getStyle: function(obj, attr){
		if(obj.currentStyle){ //针对IE
			return obj.currentStyle[attr];
		}else{
			return getComputedStyle(obj,false)[attr];
		}
	},
	
	/* 获取body宽高
	 * 
	 * @return obj {width,height}
	 * */
	getBody: function(){
		return {
			width: document.documentElement.clientWidth || document.body.clientWidth,
			height: document.documentElement.clientHeight || document.body.clientHeight
		};
	},
	
	/*让元素在body里绝对居中
	 * @param obj  DOMobj 居中的那个元素对象
	 */
	
	showCenter: function(obj){
		
		//console.log(this);
		//this在不同执行环境指向的对象是不一样的，所以用一个变量在指向变化之前先存下来
		var _this = this;
		
		//obj相对于body定位
		document.body.appendChild(obj);
		obj.style.position = "absolute";
		
		function center(){
			//console.log(_this);
			var _left = (_this.getBody().width - obj.offsetWidth)/2,
				_top = (_this.getBody().height - obj.offsetHeight)/2;
			obj.style.left = _left + "px";
			obj.style.top = _top + "px";
		}
		
		center();
		window.onresize = center;
		
	},
	/* 获取和设置样式
	 * @param obj DOMobj 设置谁的样式
	 * @param oAttr obj  {left:"200px",top:"100px"} 设置css
	 * @param oAttr string 获取属性值  @return string  oAttr对应的属性值
	 * */
	css: function(obj,oAttr){
		if(typeof oAttr === "string"){
			return obj.style[oAttr];
		}else{
			for(var key in oAttr){
				obj.style[key] = oAttr[key]; 
			}
		}
		
	},
	
	/*添加事件监听
	 * @param obj DOMobj 添加事件的DOM元素
	 * @param type string 事件句柄
	 * @param fn Function 事件处理函数
	 * */
	on: function(obj, type, fn){
		//兼容判断
		if(window.attachEvent){
			obj.attachEvent("on"+type, fn);
		}else{
			obj.addEventListener(type, fn, false); //第三个参数指是否捕获，默认是false
		}
	},
	
	/*移除事件监听
	 * @param obj DOMobj 添加事件的DOM元素
	 * @param type string 事件句柄
	 * @param fn Function 事件处理函数
	 * */
	off: function(obj, type, fn){
		window.detachEvent ?
			obj.detachEvent("on"+type, fn) :
			obj.removeEventListener(type, fn, false);
	},
	
	/* 存取cookie
	 * @param key string cookie的名称
	 * @param [value] string cookie的值  如果不传，获取cookie
	 * @param [exp] object  {expires:3,path:"/"} 
	 * */
	cookie: function(key, value, exp){
		//判断value是否有效
		if(value === undefined){
			//获取
			var obj = new Object();
			var str = document.cookie;
			var arr = str.split("; ");
			for(var i = 0; i < arr.length; i++){
				var item = arr[i].split("=");
				obj[item[0]] = item[1];
			}
			//判断有没有取到
			return obj[key] ? decodeURIComponent(obj[key]) : undefined;
			
		}else{
			//拼接expires
			var str = "";
			if(exp){
				//如果传了过期时间
				if(exp.expires){
					//设置new Date到过期的那一天
					var d = new Date();
					d.setDate(d.getDate()+exp.expires);
					str += ";expires="+d;
				}
				//如果传了path
				if(exp.path){
					str += ";path="+exp.path;
				}
			}
			
			document.cookie = key+"="+encodeURIComponent(value)+str;
		}
	}
}

　　以上，就是我用js写的添加购物车以及查看购物车的代码，比较简单。用的存取cookie的方式

转载于:https://www.cnblogs.com/orange-cccc/p/10097122.html

weixin_30292843
关注
js+cookies实现悬浮购物车的方法
10-24
主要介绍了js+cookies实现悬浮购物车的方法,涉及javascript数值计算与cookie的相关操作技巧,需要的朋友可以参考下
【原创】JS+COOKIES实现健壮的购物车！
weixin_30747253的博客
11-28 93
近日正在写个商城系统，打算自己开个服装店的，o(∩_∩)o...哈哈 大家都知道商城系统中是离不开购物车的，据观察，网上大多数商城程序的购物车都是采用的一种比较简单的存储方式来实现购物车，那就是把选中了的ID直接拼接起来。这种做法当然在需求不高的情况下足矣，可是想要拥有一个更健壮的购物车的话，却不能满足了。 我的方法是将购物车内商品的几个基本必要属性都要存储起来...
JavaScript实现商品与购物车
最新发布
Q_w7742的博客
09-05 885
定义addToCart函数，从产品列表中找到与给定productId匹配的产品，如果不存在则退出函数并打印错误信息（便于调试），一开始的时候从本地存储中获取购物车数据，如果不存在则初始化为空对象。再遍历产品数组，为每个产品创建一个包含链接、价格、添加按钮的HTML结构，并将每个产品的HTML结构添加到product元素中。当然，这里的链接我们会在之后再讲。然后是购物车相关内容，首先一样要渲染购物车，定义renderCart()函数，对于数量大于0的显示数目并计算价格，如果购物车是空的则显示empty等。
js+cookie 购物车
weixin_34112030的博客
08-17 116
$(function () { //var ctx = new Ch(); //ctx.Clear(); //$.cookie(ctx.cookieName, ""); //alert($.cookie(ctx.cookieName)); }); //购物车 var Cart = function () { this.Count = 0;...
用js+cookie实现商城的购物车功能
dfe3318的博客
04-11 229
页面上的添加功能主要就是两个按钮 <input name="buy" type="image" alt="第一个商品" src="images/buy.gif" align="middle" onclick="getInfo();" style="float:left;" /> <h1>商品1</h1><br/> &l...
javascript+cookie 实现购物车
书写人生
02-08 1940
/***  * 购物车操作模块  *   */  var shopCart = function(window){            "use strict";      //全局变量      // note new new Date("2020-12-23") 在ie下面报错，不支持这样的语法      var items = [],cartName='kuaidian_shop_cart...
原生js+cookie实现购物车功能的方法分析
10-18
1. **购物车显示**：在页面上展示用户添加到购物车的商品，可以通过定时检测Cookie或在用户访问购物车页面时读取Cookie并渲染。 2. **数量调整**：用户可能需要增加或减少购物车内商品的数量，这需要修改对应的...
js+cookie购物车
07-27
在这个“js+cookie购物车”项目中，我们看到开发者使用JavaScript和Cookie技术来实现这一功能。下面我们将详细探讨JavaScript、Cookie以及它们如何在购物车场景中结合使用。 JavaScript是一种强大的客户端脚本语言...
简单3步 js使用cookie实现的购物车功能[原创]
weixin_30751947的博客
05-24 223
引入JQuery.js支持 加入JQuery.Cookie.js，代码如下 1 jQuery.cookie = function(name, value, options) { 2 if (typeof value != 'undefined') { // name and value given, set cookie 3 options = op...
JS+COOKIES实现健壮的购物车
何足道也
07-15 693
大家都知道商城系统中是离不开购物车的，据观察，网上大多数商城程序的购物车都是采用的一种比较简单的存储方式来实现购物车，那就是把选中了的ID直接拼接起来。这种做法当然在需求不高的情况下足矣，可是想要拥有一个更健壮的购物车的话，却不能满足了。我的方法是将购物车内商品的几个基本必要属性
JS购物车
m0_67880202的博客
01-17 251
【代码】JS购物车。
JS实现购物车
01-05
JS实现购物车及计算删除
js实现购物车功能
06-14
原生js实现简单购物车功能，方便简单，可直接使用到web
原生JS 购物车及购物页面的cookie使用
axbrt02862的专栏
02-09 203
////////////////////////////////////购物页面 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>购物页面</title> <style> ul{list-style:none;pa...
购物车（Js）
m0_62188960的博客
03-27 336
购物车
js购物车
Swilder柠
08-24 1526
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;met
购物车js代码
Fangel技术博客
01-29 1611
define([], function() { function init(page) { var delAble = true;         $(".page[data-page='shopping-cart'] .swipeout").on('deleted',function(){         var title_num = $(this).closest(".list-bl
使用JavaScript和Cookie实现购物车功能
类`Car`是这个程序的核心，它负责管理购物车中的商品类型和商品。每个商品类型由`typeObj`对象表示，包含`name`（类型名称）和`value`（一个商品对象数组）。商品对象`proObj`则包含`name`（商品名称）和`value`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值