# 第二次兰蔻项目

**Repository Path**: giteenihao/TwoLancom

## Basic Information

- **Project Name**: 第二次兰蔻项目
- **Description**: 完善后的第二次项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

#### 一:首页所遇到的问题

* 跳转到下一个页面是location.href = "页面路径"
* 让页面重新加载是history.go(0); //这个可以自动刷新页面
* 对同一个元素进行相同的事件绑定，会触发事件冒泡(由子元素向父元素触发，谁冒泡给谁添加阻止事件冒泡)
	//btn.onclick = function(evt){
		var e = evt || event;
		e.stoppropagation()?e.stopPropagation:e.cancelBubble = true;
		oDiv.style.display="block"
		
	}
	document.onclick = function(){
		oDiv.style.display="block"
	}

1.阻止a标签跳转的方法好像是:
	<a href="" javascript=";">
2.获取select option里面值的方法:
	$("select").find("option:selected").text()   写值：就往text(里面添加) 
3.banner里面的img
	(1)img用一个div包裹，div不写宽高，自适应
	(2)给img设置宽度100%，随着父元素的宽度自适应
	
	<!-- 这块要考虑到图片在不同电脑上的分辨率的问题，如果大的banner图使用图片做的话
	 1.给图片外面包一个div,不设置宽度，随着父级浏览器自适应，(也就是说，页面多宽，div多宽)
	 
	 2.原理:div下的img的宽随着img的父级也就是div的宽改变而改变，
	 但是不能设置宽，
					原因:当竖向滚动条出来，会压缩页面的宽度，div会随着页面的变化而变化，而img的宽有时候可能很大，
	 所以它和div适应不了，所以加上一个width:100%;
	 (否则，当浏览器变时，div也会变化，但是图片大小是不变的 、所以就会出现横向滚动条，)
	 3.给图片设置随着div元素变化而变化的宽度，设置成width:100%;
	 (图片有一个特性，如果改变了他的宽，他的高也会随着宽度等比例缩放)
	
	 -->
4.回到顶部的方法
	jQuery方法：$(window).scrollTop(0); //把滚动条的高度设置成0
	原生方法:  
			back.onclick = function(_top) {
					var _top = document.body.scrollTop || document.documentElement.scrollTop;
					if (_top > 0) {	
						//让它的滚动条高度等于0
						 document.documentElement.scrollTop= 0;
				}
			}

*5.siblings(),针对于兄弟节点
	//当滑动到每一个相同类名的小图时，当前的图片出现的样式
	$(".blockall").mouseover(function() {
		$(this).css({
			border: "3px solid gold",
			translateY: "-4px"
		}).siblings(this).css({
			border: "none",
			translateY: "0"
		})
	})
	
6.点击退出
	让这次的账号退出去，做法是将登陆成功之后存储的名字和密码获取出来，然后将它的值设置成清空或者删除removeItem("key");
	然后返回最初的状态，刷新页面，可以用history.go(0);
#### 二:登录注册页遇到的问题
1.选项卡
	注意事项：(1)选项卡下面是一部分
			 (2)写完之后，先隐藏，写另一个板块
			 (3)根据功能判断哪个要显示，用代码写
2.弹出层
	两个div,一个是遮罩层，一个是内容
	<div id="mask"></div>
	<div id="popup"></div>
	#mask{
	    width: 100%;
	    height:100%;
	    background-color:rgba(0,0,0,.3);
	    position:fixed;
	    top:0;
	    left:0;
	    display:none;
	}
	#popup{
	    width:650px;
	    height:400px;
	    background-color: #ffffff;
	    position:absolute;
	    top:50%;
	    left:50%;
	    transform: translate(-50%,-50%);
	    display:none;
	}
3.后台逻辑问题
	3.1.注册前端页面
		(1)前端可以先进行判断，
		if((手机号&&密码&&确认密码) && 密码=确认密码)
		(2)向后端发送这个手机号，和密码的参数
		(3)接收响应回的数据
	3.2.注册后台逻辑
		(1)接收来自前端的参数
		(2)在数据库中查找有没有这两个参数所对应的数据
		(3)如果存在，啧=则向前端返回用户以存在
		(4)如果不存在，则进行数据库的增加操作
		mysql_query("insert into user values('$username','$pwd')",$conn);
	3.3.登录前端页面
		(1)获取登录页面input框里的值,传参给后台
	3.4.登录后端页面
		(1)获取前端传过来的参数；
		(2)先对用户名进行查找，分为两种情况
			如果用户名存在，则进行对密码的判断，如果该密码存在，就可以进行登录，如果密码不存在，就说明密码输入错误
			如果用户名不存在，就让他去登录吧
		$result = mysql_query("select * from user where userid = $email",$conn);
		
		if(mysql_num_rows($result) == 1){
				// echo "用户存在";
				$r=mysql_query("select * from user where pwd= $pwd AND userid = $email",$conn);
				if(mysql_num_rows($r)==1){
					echo "1";
				}else{
					echo "2";
				}
			}else{
				echo "3";
			}
			
4.点击第一次，出现对号，点击第二次，对号消失.....
	(1)如果是用雪碧图做的
	解决方法:给这个块添加对号出现的类名，进行判断，
			1.点击时判断这个类名存不存在hasClass(),如果存在，则进行类名的清空removeClass();
			2.如果不存在，则添加出现的类名addClass();
			toggleClass() 追加/删除类名  (这个应该也可以直接实现)
	(2)使用p嵌套span
			1.点击的时候，也是添加类名，方法同上(类名中的属性display:block)
			2.也可以让这个<span>√</span>进行slideToggle()/fadeToggle;
			  添加点击事件，如果显示就让他隐藏，如果不显示就让他出来
	(3)如果使用复选框的话，看能不能把背景色改变
	
			

*5.进行登录信息在本次浏览中的存储
	我的做法:在后台返回数据也就是登录成功之后，在进行存储
		if (resText == 1) {
			alert("登录成功");
			// 登录成功之后，让他的弹出框和shadow都消失
			$("#Tbox").css({
				display:"none"
			})
			$("#shadow").hide();

			//登录成功之后存储 登录的账号和密码
			let ss = sessionStorage;
			let name = $(".email").val();
			let pwd = $(".password").val();
			ss.setItem("name",name);
			ss.setItem("pwd",pwd);
		}
			

#### 三:列表页遇到的问题
1.模块的创建
	(1)只需要创建一个模块，并且将里面的东西排版好；
	(2)将模板进行隐藏，虽然隐藏了，但是也占了一条数据。
2.图片的插入
	(1)将图片名进行格式化的命名eg:list0-1.jpg
	(2)在后台以id的形式进行存储
	(3)获取时，拿后台获取到的id值进行插入
3.图片上的蒙版
	这些块的类名都是一样的，获取到了好多块，滑到哪个块上的时候，查找这个块下的蒙版的元素，让他显示
	$(".size").mouseover(function() {
		// 查找当前事件下的元素的样式
		$(this).find($(".size-mask")).css({
			display: "block"
		})
	})
4.向后端发送ajax请求
	$.get("路径","参数",fn);
	
5.列表页不需要向后端发送参数，只需要从后端获取回来
6.传回来的数据
	(1)进行数据的遍历
	(2)遍历每一条数据的时候，用模板的id克隆新的模块
	(3)将新创建的模块的id属性进行清空(清空的是它的display:none的属性)
	(4)将新创建的模块绑定到父元素身上
	(5)给这个新模块里面的内容添加东西，使用find进行查找
	(6)item是这个数组里面的每一条数据
	fstmoke
	
	
	listarr.forEach(item=>{
		//jQuery中的true,指的是是否连事件一起克隆
		//原生中的true指的是是不是连内容一起克隆
		let newmobel = $("#mobel").clone(true);
		newmoble.attr("id","");
		newmobel.appendTo($("#parent"));
		newmoble.find($(".son")).html(item[1]);
	})
	
7.点击当前的某一个板块，存储下来当前元素的下标，通过sessionstorage存储，传给下一个页面，下一个页面通过getItem进行获取。
8.通过jQuery获取下标是index();
9.向后台php发送数据，
	(1)如果查询到有好多条数据，
	(2)有多条数据的话，最后以;进行划分，结尾,如果只有一条数据，不需要写;
	eg:
		$result = mysql_query("select * from list",$conn);
		if(mysql_num_rows($result)>0){
			// mysql_fetch_assoc("结果集"):返回游标所指向的记录，以对象的方式返回
		
			// 在js中可以打点来查找eg:obtn.style,在php中不可以，只能用【】，必须区分大小写
		
			// $r返回的是结果集中的对象值
			while($r= mysql_fetch_assoc($result)){
				echo $r["imgid"]."#".$r["counts"]."#".$r["cname"]."#".$r["ename"]."#".$r["price"].";";
			}
		}


#### 四:详情页遇到的问题
1.实现加减数字
方法1:
$(".increase").click(function() {
		$(".num").html(Number($(".num").html()) + Number(1));
	})
方法2:
	let count;
	// 先让span里面的数值赋给count;
	count = $(".num").html();
	
	//点击＋号
	$(".increase").click(function() {
		// 给变量+1
		++count;
		// 加过后的变量值再赋给span里面的html
		$(".num").html(count);
	})
	
	//点击－号
	$(".decrease").click(function() {
	if($(".num").html() > 1){
		count--;
		$(".num").html(count);
	}else {
		$(".num").html(1);
	}
	})
	
2.放大镜下面的小图如何到smallbox中去
	(1)点击哪个小图，获取哪个小图的路径；
	(2)获取到的路径赋给smallbox和bigbox中；
	(3)以模板字符串的形式进行赋值
	eg:
		$(".p-img").click(function() {
			// 获取当前的点击时的图片路径
			let att = $(this).attr("src");
			// 赋给小图的路径，用attr
			$(".smallbox").css({
				// 模板字符串，` ${变量} `
				backgroundImage: `url(${att})`
			})
			$(".bigbox").css({
				// 模板字符串，` ${变量} `
				backgroundImage: `url(${att})`
			})
		})
3.后台逻辑
	接收到上个页面点击时存储的下标，以参数传给后台，后台接收后，按照下标进行数据的查找，(下标对应的就是id),查找id对应的那一条数据
	eg:
		$result = mysql_query("select * from list where imgid = '$listid'",$conn);
			// obj是查询到的每一条数据obj[]
		while($obj= mysql_fetch_assoc($result)){
			echo $obj["imgid"]."#".$obj["ename"]."#".$obj["cname"]."#".$obj["price"]."#".$obj["counts"];
		}
		

#### 五:购物车页面遇到的问题
1.点击立即结算的时候判断之前有没有登录
	我的做法(1):将之前登录页面的手机号和密码在登录成功之后进行存储;
			(2):在这个页面进行获取，如果能获取到这个值，也就是值不为空，则可以进行点击跳转
			(3):如果获取不到值，则进行登录注册页的弹出，进行登录或注册
	eg:(3)
		$(".pay").click(function(){
			let name = ss1.getItem("name");
			let pwd = ss1.getItem("pwd");
			if(name && pwd){
				location.href = "6.order.html";
			}else{
				$("#Tbox").fadeIn();  //让弹出框淡入
				$("#shadow").fadeIn();
		}
2.复选框
	// 复选框----当全选按钮被点击，剩下的全部点击
	$("#in1").click(function(){
		// 这种方法只能点击一次
		// $("input").attr("checked","checked");
		
		// 这种方法是点击一次，判断这个框有没有被选中，被选中了，则下面的所有框都被选中，若没有被选中，则所有的input框都不被选中
		// prop()获取匹配的元素的属性值  ！！属性值
		 if ($(this).prop("checked")) {  //为真
		        $("input").attr("checked", true);
		    } else {    //为假
		        $("input").attr("checked", false);
		    }
	})
	
3.	点击删除的时候，要先查找到他的父元素closet()

	// 点击删除时，查找它所在的父元素，将那一行全部删除
	// closest()方法：查找父级元素，比parent()好用
	$("#delete").click(function(){
		$(this).closest($("#center")).remove();
		// 点击删除时，几件商品值变为0
		$(".num").html(0) ;
	})


#### 六:订单页遇到的问题
1.正则判断
	先规定一个正则表达式，reg = /^***$/,用这个正则表达式判断要判断的东西，reg.test(值)，如果是错误的话，也就是false,输出不成功，就好了
	eg:// 设置一个正则
		let regname = /^[\u4e00-\u9fa5]{2,4}$/;
		// 失去焦点时判断输入的内容是否和规定的正则一样
		name.onblur = function() {
		if (regname.test(name.value) == false) {
			spanname.innerHTML = "*请重新输入"
		} else {
			spanname.innerHTML = ""
			}
		}

2.出现弹出框后自动消失
	解决办法:让一个框，淡入淡出，可以先淡入后淡出，可以写在后面的异步操作中，例如
	 fadeIN(时间，类型，回调函数)，他是一个异步操作，要想他先执行完，在执行后面的，只能写到他的回调函数中
	 eg:
		// 点击立即支付，进行判断
		$(".nowpay").click(function() {
		
			// 点击按钮，让这个框先出现后，消失，要写在异步代码中
			$("#box").fadeIn(2000, function() {
				$("#box").fadeOut(2000);
			});
		
			// 这个是判断地址输入后,这个块要是出来，就提示支付成功
			if ($("#addcon").css("display") == 'block') {
				alert("支付成功");
				$("#box").hide()
			}
		})