js事件登录案例

最新推荐文章于 2024-05-13 16:21:10 发布

约卡

最新推荐文章于 2024-05-13 16:21:10 发布

阅读量610

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46247854/article/details/123248388

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

CSS padding（填充）是一个简写属性，定义元素边框与元素内容之间的空间，即上下左右的内边距。

padding（填充）
当元素的padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。

单独使用padding属性可以改变上下左右的填充。

Padding属性，可以有一个到四个值：

padding：25px 50px 75px 100px 分别代表：上填充，右填充，下填充，左填充

padding：25px 50px 75px 分别代表：上填充，右左填充，下填充

padding：25px 50px 分别代表：上下填充，右左填充

padding：25px 分别代表：上下右左填充

所有的CSS填充属性
属性说明
padding 使用简写属性设置在一个声明中的所有填充属性
padding-bottom 设置元素的底部填充
padding-right 设置元素的右部填充
padding-top 设置元素的顶部填充

.使用margin简化写法注意事项:
如果提供全部四个参数值，将按上、右、下、左的顺序作用于四边。

如果只提供一个，将用于全部的四边。

如果提供两个，第一个用于上、下，第二个用于左、右。

如果提供三个，第一个用于上，第二个用于左、右，第三个用于下。

auto是页面左右留白相同的意思

border属性及其应用
border 简写属性在一个声明设置所有的边框属性。
border: width style color
可以按顺序设置如下属性：

border-width
1.可以指定长度值，比如 2px 或 0.1em(单位为 px, pt, cm, em 等)
2.或者使用 3 个关键字之一，它们分别是 thick 、medium（默认值）和 thin。

border-style
1.none: 默认无边框
2.dotted: 定义一个点线边框
3.dashed: 定义一个虚线边框
4.solid: 定义实线边框
5.double: 定义两个边框。两个边框的宽度和 border-width 的值相同
6.groove: 定义3D沟槽边框。效果取决于边框的颜色值
7.ridge: 定义3D脊边框。效果取决于边框的颜色值
8.inset:定义一个3D的嵌入边框。效果取决于边框的颜色值
9.outset: 定义一个3D突出边框。效果取决于边框的颜色值

border-color
name - 指定颜色的名称，如 “red”
RGB - 指定 RGB 值, 如 “rgb(255,0,0)”
Hex - 指定16进制值, 如 “#ff0000”
**布局 **

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
				<style>
					*{/*通配符选择器   消除默认样式*/
						margin:0;
						padding:0;
					}
					form{/*元素选择器  设置form的样式*/
						
						
						/*内边距  上下左右填充为20px  
						 * 外边距四面相等50px   auto左右水平居中
						 * 边框3px宽实线粉色
						 * display:flex; 弹性布局
						 *  flex-direction:column;/*主轴设置为y轴
						 * 
						 * CSS里面的font-size我们都知道是用来设置字体大小的，
						
						 */ 
						width:500px;
						padding:20px;
						margin:50px auto;
						border:3px solid pink;
						display:flex;
						flex-direction:column;
						font-size:30px;
						padding-top:50px;
						position:relative;
					}
					
					form>span{
						position:absolute;
						left:50%;
						top:5px;
						transform: translateX(-50%);/*让它横向居中*/
						width:100%;
						text-align:center;
						color:red;
						display:none;/*平时不让其显示*/
					}
					form>label{/*  和空格一样应该也是一种包含选择器的写法*/  
						height:50px;
					}
					
					form>label>input{/*文本框也需要调大一些*/
						font-size:24px;
						height:40px;
						padding-left:20px;
					}
				</style>
	</head>
	<body>
		<form>
			<span>用户名或者密码错误!!</span>
			<label>
				用户名:<input type="text">
			</label>
			<label>
				密 码:<input type="text">
			</label>
			<button>登录</button>
		</form>
	<script>
		
	</script>
	</body>
</html>

需要如何发送给后端?
=>按照接口文档的规范进行发送
在这里插入图片描述

<body>
		<form>
			<span class="error" >用户名或者密码错误!!</span>
			<label>
				用户名:<input class="username" type="text">
			</label>
			<label>
				密 码:<input class="password"     type="text">
			</label>
			<button>登录</button>
		</form>
	<script>
		/*
		 案例  -登录
		 需求分析:
		 +问题1：什么时候进行发送请求?
		 =>点击登录按钮的时候
		 =》需要给 form 标签绑定一个表单提交事件
		 +问题2：需要拿到那些信息?
		 =>需要拿到用户填写的用户名和密码
		 +问题3：需要如何发送给后端?
		 =>按照接口文档的规范进行发送
		 * 
		 * 问题4：请求完成之后，我们需要做什么?
		 * =>根据后端返回的信息，进行一些后序的操作
		 * =>如果后端返回的信息是登录成功，那么我们进行页面跳转
		 * =>如果后端返回的是登陆失败，那么我们提示用户错误
		 * */
		
		//0.获取元素
		//0-1 获取form 标签   绑定表单提交事件
		var loginForm = document.querySelector('form')//获取form元素
		//querySelector()该方法接受一个css 查询并返回该匹配模式的第一个子元素，
		//如果没有匹配的元素则返回null
		
		//0-2  用户名文本框
		var nameInp = document.querySelector('.username')
		
		//0-3  密码文本框
		var pwdInp=document.querySelector('.password')
		
		//0-4 错误提示文本
		var errBox=document.querySelector('.error')
		
		
		//1.给from标签绑定表单提交事件
		loginForm.onsubmit = function(e){
			//注意:阻止表单的默认提交行为
			e.preventDefault()//阻止默认事件方法
			/*loginForm.onsubmit = function(e)*/
			/*，作用是取消一个目标元素的默认行为。

既然是说默认行为，当然是元素必须有默认行为才能被取消，如果元素本身就没有默认行为，调用当然就无效了。

什么元素有默认行为呢？如链接<a>，提交按钮<input type=”submit”>等。

当Event 对象的 cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
*/
			//console.log('我要发送 ajax 请求')
			
			
			//2.拿到填写的用户名和密码
			var name=nameInp.value
			var pwd =pwdInp.value
			
			
			//2-2  验证用户名和密码
			if(!name || !pwd) return alert('请完整填写表单')
			console.log(name,pwd)
			
			//3.发送ajax请求
			//查看接口文档发现是post请求，那么我们就需要按post请求来发送
			//创建ajax对象    配置本次的请求信息
			var xhr = new XMLHttpRequest()
			xhr.open('POST','http://localhost:8888/users/login',true)
			xhr.onload = function(){
				//因为后端返回的是Jison格式数据
				var res = JSOsN.parse(xhr.responseText)
				console.log(res)
				//进行条件判断
				if(res.code===0){
					//登陆失败了
					//失败应该提示错误文本
					errBox.style.display='block'
				}else{
					//登录成功了
					window.location.href='./登录案例home.html'
				}
			}
		}
		//因为POST请求携带参数是在请求体内
		
		xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
		//注意
		//post 请求携带参数需要提前说明
		    xhr.send('username='+ name +'&password='+ pwd)	
		    //发现参考文档内有 username   和 password 两个参数
		    
	</script>
	</body>