JS随手记——商城购物车的分析与实现

Ida ·

更新时间:2024-09-20

· 780 次阅读

目标需求

实现网上商城的购物车功能，将物品添加到购物车，并能一直保持商品在购物车内的状态。

分析

首先，页面传值和数组存储信息怕是不行了，则例我们选择使用cookie来实现，毕竟大佬如是说：
在这里插入图片描述

JS实现Cookie的设置与读取可以参考一下我的上篇文章：JS随手记——Cookie的设置与读取。

具体实现

购物车功能，首先肯定就是添加到购物车了，添加事件如下：

			function addbuycar(){
				//获取当前路径并切割ID
				var url = window.location.href;
				var phoneid = url.split("?")[1];
				//获取当前ID的手机信息字符串
				phoneid = phoneid.replace("id=","").trim();
				setCookie(phoneid,"是");
				// window.location.href="addok.html?id="+phoneid;
			}

这里是接上午的界面传值的效果继续写的，所以切割了路径获得id，你也可以直接存入一个id和值。
后面可以跟上你点击之后需要跳转的路径。

接下来就是购物车页面加载时的事件了，通过循环判断每一个id的cookie值来决定是否将该条信息动态添加至table中，下面是代码：

			for(var i =0 ;i<=10;i++)
			{
				if(getCookie(i)=="是")
				{
					//获取手机名称
					var phonename = phones[i].split(" ")[0];
					//获取手机价格
					var Price = phones[i].split(" ")[2];
					//获取手机图片相对路径
					var phonesrc = "./img/"+phonename.replace(/_/g," ")+".png";
					//获取table表格
					var tab = document.getElementById("tab");
					//生成新的tr行
					var tr = document.createElement("tr");
					//将tr行动态加入表格
					tab.appendChild(tr);
					//生成第一个td，用来存放全选的复选框，并将td添加到tr中
					var t0 = document.createElement("td");
					var che = document.createElement("input");
					che.type = "checkbox";
					che.name = "buy";
					che.className = "tdchenck";
					t0.appendChild(che);
					tr.appendChild(t0);
					//生成第二个td，用来存放手机的名称和展示手机的图片，并将td添加到tr中
					var t1 = document.createElement("td");
					var t1img = document.createElement("img");
					t1img.src = phonesrc;
					t1img.className = "tdimg";
					var t1p = document.createElement("p");
					t1p.innerHTML = phonename.replace(/_/g," ");
					t1p.className = "tdp";
					t1.appendChild(t1img);
					t1.appendChild(t1p);
					tr.appendChild(t1);
					//生成第三个td，用来存放手机的价格，并将td添加到tr中
					var t2 = document.createElement("td");
					var t2p = document.createElement("p");
					t2p.innerHTML = Price;
					t2p.className = "tdPrice";
					t2.appendChild(t2p);
					tr.appendChild(t2);
					//生成第四个td，用来存放手机购买数量（这里为了省事，直接给了“1台”，可以改成input允许用户输入）
					var t3 = document.createElement("td");
					var t3p = document.createElement("p");
					t3p.innerHTML = "1台";
					t3p.className = "tdPrice";
					t3.appendChild(t3p);
					tr.appendChild(t3);
				}
			}

因为我的数组长度为11，所以这里就直接定义为i=0;i<=10了，你可以更改为你的数组长度。

此时基本完工，但是会出现这样的情况：
原创文章 27获赞 70访问量 2万+ 关注私信展开阅读全文
作者：狗狗狗狗狗乐啊