javascript购物网站 使用js写的购物商城

目标需求

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

分析

首先，页面传值和数组存储信息怕是不行了，则例我们选择使用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了，你可以更改为你的数组长度。

此时基本完工，但是会出现这样的情况：

非常难看，兄弟，当所有的项都不符合时，便都不会添加，列表就显得奇奇怪怪。这里可以在循环前var一个变量为0，当有符合的项时，变量++，最后判断一下变量的值，如果依然为0，说明购物车是空的，可以将列表隐藏，将一个“购物车为空的图片显示出来”，大概如下图所示：

这样看起来就舒服多了，附上隐藏表格，显示图片的代码：

function showall(){
				var show = 0;
				for(var i =0 ;i<=10;i++)
				{
					if(getCookie(i)=="是")
					{
						//上述动态添加代码
						show++;
					}
				}
				if(show == 0)
				{
					var have = document.getElementById("have");
					have.style.display = "none";
					var nohave = document.getElementById("nohave");
					nohave.style.display = "block";
				}
			}

其中动态添加的部分上面已经贴过了，而且篇幅较大，就不再贴了。这里初始时，"have"即表格是显示的，"nohave"即购物车为空的图片是隐藏的，窗体加载时执行该方法，若遍历后变量show仍为0，则隐藏"have"表格，显示"nohave"图片，以达到效果。

最后再附一张购物车内有内容的图（表格很丑，你可以美化一下）：

结语：

全篇内容仅供参考，只是我这种小白能用这种方法实现，但不代表这种方法或这样使用的行为就是正确的。