购物车

sunShiLou · Sep 13, 2017 · 545407d · 545407d
commit 545407d
Show file tree

Hide file tree

Showing 97 changed files with 829 additions and 0 deletions.
diff --git a/shopCart_sh1705/.project b/shopCart_sh1705/.project
@@ -0,0 +1,37 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+	<name>test</name>
+	<comment></comment>
+	<projects>
+	</projects>
+	<buildSpec>
+		<buildCommand>
+			<name>com.aptana.ide.core.unifiedBuilder</name>
+			<arguments>
+			</arguments>
+		</buildCommand>
+	</buildSpec>
+	<natures>
+		<nature>com.aptana.projects.webnature</nature>
+	</natures>
+	<filteredResources>
+		<filter>
+			<id>1479866373171</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+		<filter>
+			<id>1505179373333</id>
+			<name></name>
+			<type>26</type>
+			<matcher>
+				<id>org.eclipse.ui.ide.multiFilter</id>
+				<arguments>1.0-name-matches-false-false-node_modules</arguments>
+			</matcher>
+		</filter>
+	</filteredResources>
+</projectDescription>
diff --git a/shopCart_sh1705/cookie.js b/shopCart_sh1705/cookie.js
@@ -0,0 +1,29 @@
+//  value值  类型是一个  对象
+function setCookie(key,value,days){
+	var now = new Date();
+	now.setTime(now.getTime() + days*24*60*60*1000 ) 
+	document.cookie=key+"="+value + ";expires="+now;
+}
+function getCookie(key){
+	//如果cookie中有数据  才可以获取数据
+	if(document.cookie){		
+		var cookieInfo = document.cookie;
+		//cookie中可能会包含一些 额外的数据，这些数据特点是由   分号和空格间隔的
+		//所以 先将 分号和空格  替换掉   替换成  ;
+		var arr = cookieInfo.replace(/;\s/g,';').split(";");	
+		for(var i=0;i<arr.length;i++){
+			item = arr[i].split("=");
+			if(item[0] == key){
+				brr = item[1];
+				return JSON.parse(brr);//如果找到 我们想要的键，将值转成数组返回 
+			}
+		}
+		//如果cookie中 没有我们想获取的键值，直接返回一个空数组
+		return [];
+	}
+	//如果cookie中没有数据，直接返回一个空数组
+	return [];
+}
+function removeCookie(key){
+	setCookie(key,"",-1);
+}
diff --git a/shopCart_sh1705/data.json b/shopCart_sh1705/data.json
@@ -0,0 +1,132 @@
+{
+	"classify001":{
+		"name" : "小米手机",
+		"list" : [
+			{
+				"id" : "shop01",
+				"name" : "小米1",
+				"src" : "9.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop02",
+				"name" : "小米2",
+				"src" : "2.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop03",
+				"name" : "小米3",
+				"src" : "3.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop04",
+				"name" : "小米4",
+				"src" : "4.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop05",
+				"name" : "小米5",
+				"src" : "5.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop06",
+				"name" : "小米6",
+				"src" : "6.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop07",
+				"name" : "小米7",
+				"src" : "7.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop08",
+				"name" : "小米8",
+				"src" : "8.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop09",
+				"name" : "小米9",
+				"src" : "9.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop10",
+				"name" : "小米10",
+				"src" : "10.jpg",
+				"price" : "999"
+			}
+		]
+	},
+	"classify002":{
+		"name" : "三星",
+		"list" : [
+			{
+				"id" : "shop11",
+				"name" : "三星11",
+				"src" : "11.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop02",
+				"name" : "三星12",
+				"src" : "12.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop13",
+				"name" : "小米13",
+				"src" : "13.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop04",
+				"name" : "小米14",
+				"src" : "14.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop15",
+				"name" : "小米15",
+				"src" : "15.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop16",
+				"name" : "小米16",
+				"src" : "16.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop17",
+				"name" : "小米17",
+				"src" : "17.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop18",
+				"name" : "小米18",
+				"src" : "18.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop19",
+				"name" : "小米9",
+				"src" : "9.jpg",
+				"price" : "999"
+			},
+			{
+				"id" : "shop20",
+				"name" : "小米20",
+				"src" : "20.jpg",
+				"price" : "999"
+			}
+		]
+	}
+}
diff --git a/shopCart_sh1705/img/._1.jpg b/shopCart_sh1705/img/._1.jpg
diff --git a/shopCart_sh1705/img/._10.jpg b/shopCart_sh1705/img/._10.jpg
diff --git a/shopCart_sh1705/img/._11.jpg b/shopCart_sh1705/img/._11.jpg
diff --git a/shopCart_sh1705/img/._12.jpg b/shopCart_sh1705/img/._12.jpg
diff --git a/shopCart_sh1705/img/._13.jpg b/shopCart_sh1705/img/._13.jpg
diff --git a/shopCart_sh1705/img/._14.jpg b/shopCart_sh1705/img/._14.jpg
diff --git a/shopCart_sh1705/img/._15.jpg b/shopCart_sh1705/img/._15.jpg
diff --git a/shopCart_sh1705/img/._16.jpg b/shopCart_sh1705/img/._16.jpg
diff --git a/shopCart_sh1705/img/._17.jpg b/shopCart_sh1705/img/._17.jpg
diff --git a/shopCart_sh1705/img/._18.jpg b/shopCart_sh1705/img/._18.jpg
diff --git a/shopCart_sh1705/img/._19.jpg b/shopCart_sh1705/img/._19.jpg
diff --git a/shopCart_sh1705/img/._2.jpg b/shopCart_sh1705/img/._2.jpg
diff --git a/shopCart_sh1705/img/._20.jpg b/shopCart_sh1705/img/._20.jpg
diff --git a/shopCart_sh1705/img/._21.jpg b/shopCart_sh1705/img/._21.jpg
diff --git a/shopCart_sh1705/img/._22.jpg b/shopCart_sh1705/img/._22.jpg
diff --git a/shopCart_sh1705/img/._23.jpg b/shopCart_sh1705/img/._23.jpg
diff --git a/shopCart_sh1705/img/._24.jpg b/shopCart_sh1705/img/._24.jpg
diff --git a/shopCart_sh1705/img/._25.jpg b/shopCart_sh1705/img/._25.jpg
diff --git a/shopCart_sh1705/img/._26.jpg b/shopCart_sh1705/img/._26.jpg
diff --git a/shopCart_sh1705/img/._27.jpg b/shopCart_sh1705/img/._27.jpg
diff --git a/shopCart_sh1705/img/._28.jpg b/shopCart_sh1705/img/._28.jpg
diff --git a/shopCart_sh1705/img/._29.jpg b/shopCart_sh1705/img/._29.jpg
diff --git a/shopCart_sh1705/img/._3.jpg b/shopCart_sh1705/img/._3.jpg
diff --git a/shopCart_sh1705/img/._30.jpg b/shopCart_sh1705/img/._30.jpg
diff --git a/shopCart_sh1705/img/._31.jpg b/shopCart_sh1705/img/._31.jpg
diff --git a/shopCart_sh1705/img/._32.jpg b/shopCart_sh1705/img/._32.jpg
diff --git a/shopCart_sh1705/img/._33.jpg b/shopCart_sh1705/img/._33.jpg
diff --git a/shopCart_sh1705/img/._34.jpg b/shopCart_sh1705/img/._34.jpg
diff --git a/shopCart_sh1705/img/._35.jpg b/shopCart_sh1705/img/._35.jpg
diff --git a/shopCart_sh1705/img/._36.jpg b/shopCart_sh1705/img/._36.jpg
diff --git a/shopCart_sh1705/img/._37.jpg b/shopCart_sh1705/img/._37.jpg
diff --git a/shopCart_sh1705/img/._38.jpg b/shopCart_sh1705/img/._38.jpg
diff --git a/shopCart_sh1705/img/._39.jpg b/shopCart_sh1705/img/._39.jpg
diff --git a/shopCart_sh1705/img/._4.jpg b/shopCart_sh1705/img/._4.jpg
diff --git a/shopCart_sh1705/img/._40.jpg b/shopCart_sh1705/img/._40.jpg
diff --git a/shopCart_sh1705/img/._41.jpg b/shopCart_sh1705/img/._41.jpg
diff --git a/shopCart_sh1705/img/._42.jpg b/shopCart_sh1705/img/._42.jpg
diff --git a/shopCart_sh1705/img/._43.jpg b/shopCart_sh1705/img/._43.jpg
diff --git a/shopCart_sh1705/img/._5.jpg b/shopCart_sh1705/img/._5.jpg
diff --git a/shopCart_sh1705/img/._6.jpg b/shopCart_sh1705/img/._6.jpg
diff --git a/shopCart_sh1705/img/._7.jpg b/shopCart_sh1705/img/._7.jpg
diff --git a/shopCart_sh1705/img/._8.jpg b/shopCart_sh1705/img/._8.jpg
diff --git a/shopCart_sh1705/img/._9.jpg b/shopCart_sh1705/img/._9.jpg
diff --git a/shopCart_sh1705/img/1.jpg b/shopCart_sh1705/img/1.jpg
diff --git a/shopCart_sh1705/img/10.jpg b/shopCart_sh1705/img/10.jpg
diff --git a/shopCart_sh1705/img/11.jpg b/shopCart_sh1705/img/11.jpg
diff --git a/shopCart_sh1705/img/12.jpg b/shopCart_sh1705/img/12.jpg
diff --git a/shopCart_sh1705/img/13.jpg b/shopCart_sh1705/img/13.jpg
diff --git a/shopCart_sh1705/img/14.jpg b/shopCart_sh1705/img/14.jpg
diff --git a/shopCart_sh1705/img/15.jpg b/shopCart_sh1705/img/15.jpg
diff --git a/shopCart_sh1705/img/16.jpg b/shopCart_sh1705/img/16.jpg
diff --git a/shopCart_sh1705/img/17.jpg b/shopCart_sh1705/img/17.jpg
diff --git a/shopCart_sh1705/img/18.jpg b/shopCart_sh1705/img/18.jpg
diff --git a/shopCart_sh1705/img/19.jpg b/shopCart_sh1705/img/19.jpg
diff --git a/shopCart_sh1705/img/2.jpg b/shopCart_sh1705/img/2.jpg
diff --git a/shopCart_sh1705/img/20.jpg b/shopCart_sh1705/img/20.jpg
diff --git a/shopCart_sh1705/img/21.jpg b/shopCart_sh1705/img/21.jpg
diff --git a/shopCart_sh1705/img/22.jpg b/shopCart_sh1705/img/22.jpg
diff --git a/shopCart_sh1705/img/23.jpg b/shopCart_sh1705/img/23.jpg
diff --git a/shopCart_sh1705/img/24.jpg b/shopCart_sh1705/img/24.jpg
diff --git a/shopCart_sh1705/img/25.jpg b/shopCart_sh1705/img/25.jpg
diff --git a/shopCart_sh1705/img/26.jpg b/shopCart_sh1705/img/26.jpg
diff --git a/shopCart_sh1705/img/27.jpg b/shopCart_sh1705/img/27.jpg
diff --git a/shopCart_sh1705/img/28.jpg b/shopCart_sh1705/img/28.jpg
diff --git a/shopCart_sh1705/img/29.jpg b/shopCart_sh1705/img/29.jpg
diff --git a/shopCart_sh1705/img/3.jpg b/shopCart_sh1705/img/3.jpg
diff --git a/shopCart_sh1705/img/30.jpg b/shopCart_sh1705/img/30.jpg
diff --git a/shopCart_sh1705/img/31.jpg b/shopCart_sh1705/img/31.jpg
diff --git a/shopCart_sh1705/img/32.jpg b/shopCart_sh1705/img/32.jpg
diff --git a/shopCart_sh1705/img/33.jpg b/shopCart_sh1705/img/33.jpg
diff --git a/shopCart_sh1705/img/34.jpg b/shopCart_sh1705/img/34.jpg
diff --git a/shopCart_sh1705/img/35.jpg b/shopCart_sh1705/img/35.jpg
diff --git a/shopCart_sh1705/img/36.jpg b/shopCart_sh1705/img/36.jpg
diff --git a/shopCart_sh1705/img/37.jpg b/shopCart_sh1705/img/37.jpg
diff --git a/shopCart_sh1705/img/38.jpg b/shopCart_sh1705/img/38.jpg
diff --git a/shopCart_sh1705/img/39.jpg b/shopCart_sh1705/img/39.jpg
diff --git a/shopCart_sh1705/img/4.jpg b/shopCart_sh1705/img/4.jpg
diff --git a/shopCart_sh1705/img/40.jpg b/shopCart_sh1705/img/40.jpg
diff --git a/shopCart_sh1705/img/41.jpg b/shopCart_sh1705/img/41.jpg
diff --git a/shopCart_sh1705/img/42.jpg b/shopCart_sh1705/img/42.jpg
diff --git a/shopCart_sh1705/img/43.jpg b/shopCart_sh1705/img/43.jpg
diff --git a/shopCart_sh1705/img/5.jpg b/shopCart_sh1705/img/5.jpg
diff --git a/shopCart_sh1705/img/6.jpg b/shopCart_sh1705/img/6.jpg
diff --git a/shopCart_sh1705/img/7.jpg b/shopCart_sh1705/img/7.jpg
diff --git a/shopCart_sh1705/img/8.jpg b/shopCart_sh1705/img/8.jpg
diff --git a/shopCart_sh1705/img/9.jpg b/shopCart_sh1705/img/9.jpg
diff --git a/shopCart_sh1705/jquery.min.js b/shopCart_sh1705/jquery.min.js
diff --git a/shopCart_sh1705/list.html b/shopCart_sh1705/list.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<link rel="stylesheet" href="main.css" />
+		<script src="jquery.min.js"></script>
+		<script src="cookie.js"></script>
+		<style>
+			.header{
+				height: 40px;
+				width: 900px;
+				margin: 0 auto 50px;
+			}
+		</style>
+	</head>
+	<body>		 
+		<div class="header">
+			<span id="s"><a href="login.html">登录 / 注册</a></span>
+			<span id="s1">
+
+			</span>
+		</div>
+		<div class="nav clearfix">
+			<!--<span>小米手机</span>-->
+		</div>
+
+		<ul class="shoplist clearfix">
+			<!--<li>
+				<a href="page.html">
+					<img src="img/1.jpg" alt="" />
+					<p>小米1</p>
+					<p>890</p>
+				</a>
+				<button>加入购物车</button>
+			</li>-->
+		</ul>	
+	</body>
+</html>
+<script type="text/javascript">
+
+	$(function(){
+		$.ajax({
+			type:"get",
+			url:"http://127.0.0.1/shopCart_sh1705/data.json",
+			success : function(res){
+				var html = "";
+				for (var  i in  res) {
+					//console.log(i);
+					$(".nav").append(`<span>${res[i].name}</span>`);//加载标题
+					for(var j in res[i].list){
+						var ch = res[i].list[j];//{}
+						html += `<li>
+									<a href="page.html?pid=${ch.id}&cname=${i}">
+										<img src="img/${ch.src}" alt="" />
+										<p>${ch.name}</p>
+										<p>${ch.price}</p>
+									</a>
+									<span data-id=${ch.id}  data-name=${ch.name} data-src=${ch.src} data-price=${ch.price}   style="display:none"></span>
+									<button>加入购物车</button>
+								</li>`;
+					}
+				}
+				$(".shoplist").html( html );
+
+			}
+		});
+	})
+
+	$(".shoplist").on("click","button",function(){
+		var arr = [];
+		var flag = true;//可以向数组中添加数据
+		var _json = {
+			id:$(this).prev().data("id"),
+			name:$(this).prev().data("name"),
+			src:$(this).prev().data("src"),
+			price:$(this).prev().data("price"),
+			count:1
+		}
+		//当再次点击按钮时，cookie信息被覆盖  解决 ： 先取出cookie数据 存入到数组中，然后在把新增的商品存入到数组中
+		var cookieInfo = getCookie("shoplist");
+		if( cookieInfo.length != 0 ){//表示cookie中有数据
+			arr = cookieInfo;
+			//点击相同商品时，需要做商品数量的累加    用当前点击的商品编号id   和  取出来的cookie的 数据中商品id做比较 发现有相等的，count++
+			for(var i in arr){
+				if(_json.id == arr[i].id && _json.name == arr[i].name){
+					arr[i].count++;
+					flag = false;
+					break;
+				}
+			}
+		}
+
+		if(flag){
+			arr.push(_json);
+		}
+
+		setCookie("shoplist",JSON.stringify(arr));
+		var f = confirm("是否继续购买?确定--继续购买，取消---去购物车结算");
+		if( !f ){
+			location.href = "shopcar.html";
+		}
+		console.log( document.cookie );
+	})
+</script>
diff --git a/shopCart_sh1705/login.html b/shopCart_sh1705/login.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<title></title>
+		<style>
+			input{
+				padding: 5px;
+				width: 200px;
+				height: 30px;
+				border: 1px solid #d1d1d1;
+			}
+		</style>
+
+		<script src="jquery.min.js"></script>
+		<script src="cookie.js"></script>
+	</head>
+	<body>
+		<div id="register">
+			<input class="username" type="text" value="" id="uname" placeholder="请输入用户名" />
+			<br/>
+			<input class="userpassword" type="password" id="upwd" value="" placeholder="请输入密码" />
+			<br/>
+			<button id="regis">注册</button>		 
+		</div>
+		<br />
+		<div id="login">
+			<input class="username" id="hname" type="text" value="" placeholder="请输入用户名" />
+			<br/>
+			<input class="userpassword" id="hpwd" type="password" value="" placeholder="请输入密码" />
+			<br/>
+			<button id="log">登录</button>
+			<script>
+
+			</script>
+		</div>	
+	</body>
+</html>
+<script type="text/javascript">
+
+</script>