一个登录界面大家都有见过，那他是咋样实现的呢，这里给大家分享一下我的一下些经验
有不足之处阔以指出
js代码布局的
body{padding: 0;margin: 0;}.left{float: left;width: 25%;height: 755px;}.left img{width: 100%;height: 100%;}.right{float: left;height: 755px;width: 75%;}#ll{float: left;}#ll img{width: 165px;height: 58px;margin: 13px;}#rr{float: right;font-size: 13.5px;color: gray;padding-top: 30px;padding-right: 30px;}#rr a{color: gray;text-decoration-line: none;}#rr a:hover{color: orange;}#box{width: 450px;height: 600px;background-color: white;clear: both;margin: auto;margin-top: 100px;border-radius: 5px;box-shadow:0px 0px 50px 0px rgba(119, 119, 119, 0.1) ;text-align: center;}#zh,#sm{margin-top: 45px;background-color: white;font-size: 22px;border: 0px;}#zh{color: #ff6d00;}#sm{color: gray;}#zh_ing{display: block;}#sm_ing{display: none;}input{height: 60px;width: 330px;border-radius: 5px;background-color: #f9f9f9;border: 0px;margin-bottom: 20px;padding-left: 20px;font-size: 16px;}.orange{height: 60px;width: 350px;background-color: #ffbe99;border: 0px;border-radius: 5px;font-size: 17px;color: white;}#bottom{float: left;margin-left: 90px;}#bottom img{width: 48px;height: 48px;margin-left: 14px;}#hh{display: block;}#hh a{color: #ff6d00;font-size: 17px;text-decoration-line: none;}#a1{float: left;margin-left: 50px;}#a2{float: right;margin-right: 50px;}#bb{display: block;}
注册主体代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><link rel="stylesheet" href="login.css"><title>小米账号-注册</title></head><body><!-- 首部部分 start--><div class="top"><a href="小米登录.html" class="title"></a><h4>注册小米账号</h4><div class="middle"><form enctype="multipart/form-data"><div style="width:500px;float:left;margin:0 20px;"><br /><span class="p" id="usernameCheckID">*</span><label for="username" class="l">用户名:</label><div style="position:relative;display:inline;"><input id="username" type="text" style="height:30px;width:250px;padding-right:50px;" onblur="checkUserName()"/></div><br /><br /><span class="p" id="phoneCheckId">*</span><label for="phonenumber" class="l">手机号:</label><div class="d"><input id="phonenumber" type="text" class="i" onblur="checkPhoneNumber()"></div><br /><br /><span class="c" id="passwordCheckID">*</span><label for="login_password" class="l">登录密码:</label><div class="d"><input id="login_password" type="password" class="i" onblur="checkPassword()"/></div><br /><br /><span class="c">*</span><label for="confirm_password" class="l">确认密码:</label><div class="d"><input id="confirm_password" type="password" class="i"></div><br /><br /><span class="p">*</span><label for="phonenumber" class="l">兴趣:</label> <div class="d"><input type="checkbox" name="fav" id="" value="1" />唱歌<input type="checkbox" name="fav" id="" value="2" />跳舞<input type="checkbox" name="fav" id="" value="3" />绘画<input type="checkbox" name="fav" id="" value="4" />游戏<input type="checkbox" name="fav" id="" value="5" />游泳<input type="checkbox" name="fav" id="" value="6" />下棋<br /><br /><span class="p">*</span><label for="ver_code" class="l">验证码:</label><div class="d"><input id="ver_code" type="text" class="i"></div><br /><br /><input type="checkbox" name="agree" style="margin-left:100px;display:inline-block;" value="1" /><span style="font-size:10px;"><a href="https://static./html/agreement/user/zh_CN.html">我已阅读并同意《用户注册协议》</a></span><br /><br /><div><input type="button" class="button"onclick='window.location.href=("小米登录.html")' value="同意以上协议并注册"></div></div></form></div></div><!-- 首部部分 end --><!-- 尾部部分 start --><div class="footer"><ul><li><a href="#">简体</a><span>|</span></li><li><a href="#">繁体</a><span>|</span></li><li><a href="#">English</a><span>|</span></li><li><a href="#">常见问题</a><span>|</span></li><li><a href="#">隐私政策</a></li></ul></div><!-- 尾部部分 end --></body><script>//1.当失去焦点时,用户名校验函数function checkUserName(){//1.1 获取到usernameID对应的input元素节点和username对应的校验span元素节点var usernameNode = document.getElementById("username");var usernameCheckNode = document.getElementById("usernameCheckID");//1.2 定义校验正则var usernameReg = /^[\u4e00-\u9fa5]+$/ig;//1.3 获取到username元素节点的value属性值var usernameValue = usernameNode.value;//1.4 判断value属性值是否匹配正则并进行相关处理if (usernameReg.test(usernameValue)) {usernameCheckNode.innerText = "用户名输入成功！"; //当用户名输入成功时候的校验结果usernameCheckNode.style.color = "green";return true;} else{usernameCheckNode.innerText = "用户名输入失败！请输入中文用户名"; //当用户名输入失败时候的校验结果usernameCheckNode.style.color = "red";return false;}}//2.当失去焦点时,密码校验函数function checkPassword(){//2.1 获取到passwordID对应的input元素节点和password对应的校验span元素节点var passwordNode = document.getElementById("passwordID");var passwordCheckNode = document.getElementById("passwordCheckID");//2.2 定义校验正则var passwordReg = new RegExp("^[a-zA-Z]{2}[0-9]{4}$","ig");//2.3 获取到password元素节点的value属性值var passwordValue = passwordNode.value;//2.4 判断value属性值是否匹配正则并进行相关处理if (passwordReg.test(passwordValue)) {passwordCheckNode.innerText = "密码输入成功！"; //当密码输入成功时候的校验结果passwordCheckNode.style.color = "green";return true;} else{passwordCheckNode.innerText = "密码输入失败！密码为6位，前两位为英文字母，后四位为数字"; //当密码输入失败时候的校验结果passwordCheckNode.style.color = "red";return false;}}//3.当失去焦点时,手机号校验函数function checkPhoneNumber(){//3.1 获取到phoneID对应的input元素节点和phoneNumber对应的校验span元素节点var phoneNode = document.getElementById("login_password");var phoneCheckNode = document.getElementById("phoneCheckId");//3.2 定义校验正则var phoneReg = /^1[0-9]{10}$/ig;//3.3 获取到phoneNumber元素节点的value属性值var phoneValue = phoneNode.value;//3.4 判断value属性值是否匹配正则并进行相关处理if (phoneReg.test(phoneValue)) {phoneCheckNode.innerText = "手机号输入成功！"; //当手机号输入成功时候的校验结果phoneCheckNode.style.color = "green";return true;} else{phoneCheckNode.innerText = "手机号输入失败！请输入中国大陆手机号码"; //当手机号输入失败时候的校验结果phoneCheckNode.style.color = "red";return false;}}//4.定义整体提交数据校验函数function checkInput(){if (checkUserName() && checkPassword() && checkPhoneNumber()) {alert("恭喜注册成功！");return true;} else{return false;}}// 注册信息存储localStorage.setItem("confirm_password", userPass);localStorage.setItem("username", uName);console.log(userPass);console.log(surePass);window.location.href="小米登录.html";return false;</script></html>
登录主题相关代码
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="mi.css"></head><body><div class="left"><img src="left.png"></div><div class="right"><div id="top"><div id="ll"><img src="logo.png"></div><div id="rr"><a href="注册界面.html" style="color:#ff6d00; font-weight: bold ;font-size: 15px;">注册</a> <a href="https://static./html/agreement/user/zh_CN.html">用户协议</a> <a href="/miaccount/zh_CN/">隐私政策</a> <a href="https://cn./helpcenter">帮助中心</a> | <a href="#">中文(简体)</a></div></div><div><div id="box"><div><p><button id="zh">账号登录</button> | <button id="sm">扫码登录</button><br><br></p><p id="zh_ing"><input type="text" placeholder="邮箱/手机号码/小米ID" id="un"><br><input type="password" placeholder="密码" id="pwd"><br><button class="orange" id="login">登录</button></p><p id="sm_ing"><img src="code.png"><br><br><span style="color: gray;">请使用小米手机/米家等小米APP扫码登录</span></p></div><div id="hh"><div id="a1"><a href="忘记密码.html" >忘记密码？</a></div><div id="a2"><a href="#">手机号登录</a></div></div><div id="bb"><br><br><br><br><br><p style="color: #9e9e9e;clear: both;"> 其它方式登录</p><div id="bottom"><a href="#"><img src="1.jpg"></a><a href="#"><img src="2 .jpg"></a><a href="#"><img src="3.jpg"></a><a href="#"><img src="4.jpg"></a></div></div></div></div></div><script src="mi.js"></script></body></html>
