1,熊猫登录界面,通过大量原生CSS和原生JS代码,完成并实现了简单的用户交互,通过获取本地存储空间的用户名,来实现简单的登录效果,
2,判断了用户名输入框和本地存储空间的用户名是否有重复, 解决了注册界面重复注册的交互问题
视频效果如下
熊猫注册登录
登录界面
图片效果如下
HTML部分如下
<div class="login"><div class="login_header"><!-- 熊猫耳朵 --><div class="login_ear"><div class="login_ear_left"></div><div class="login_ear_right"></div></div><!-- 熊猫的脸 --><div class="login_face"><div class="login_eyes"><div class="login_eyes_left"><div class="login_eyes_item"><div class="login_eyes_cont_left"></div></div></div><div class="login_eyes_right"><div class="login_eyes_item"><div class="login_eyes_cont_right"></div></div></div></div><div class="login_nose"></div></div></div><!-- 登录主体部分 --><div class="login_item"><div class="login_language"><span class="active">简体中文</span> |<span>English</span></div><h2 class="login_title">用户登录</h2><div class="login_cont login_cont_uname"><input type="text" name="nickName" id="nickName" placeholder="用户名"></div><div class="login_txt"><div class="login_txt_cont login_txt_uname"><span class="login_caution">!</span><span class="login_caution_uname">请输入用户名</span></div></div><div class="login_cont login_cont_pwd"><input type="password" name="passWord" id="passWord" placeholder="密 码"></div><div class="login_txt"><div class="login_txt_cont login_txt_pass"><span class="login_caution">!</span><span class="login_caution_pwd">请输入密码</span></div></div><button class="login_btn">登录</button><div class="register_enter"><p>登录成功~</p></div><!-- 熊猫的手 --><div class="login_hand"><ul class="login_hand_left"><li></li><li></li><li></li></ul><ul class="login_hand_right"><li></li><li></li><li></li></ul></div></div><!-- 熊猫的脚 --><div class="login_footer"><!-- 左脚 --><div class="login_footer_left"><div class="login_footer_bg"></div><ul class="login_feet"><li></li><li></li><li></li></ul><div class="login_arch"></div></div><!-- 右脚 --><div class="login_footer_right"><div class="login_footer_bg"></div><ul class="login_feet"><li></li><li></li><li></li></ul><div class="login_arch"></div></div></div><!-- 熊猫屁股 --><div class="login_arse"></div></div>
CSS部分
*{margin: 0;padding: 0;}html,body {width: 100%;height: 100%;background-color: rgb(52,199,158);}ul {list-style: none;}/* 登录界面 */.login {position: absolute;top: 50%;left: 50%;width: 500px;height: 300px;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);}/* 熊猫头部 */.login_header {position: absolute;top: -25%;left: 50%;width: 200px;height: 200px;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}/* 熊猫耳朵 */.login_ear {position: relative;top: -33%;height: 70px;}.login_ear_left ,.login_ear_right{position: absolute;width: 70px;height: 70px;background-color: black;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.login_ear_left {left: 0;}.login_ear_right {right: 0;}/* 熊猫脸部 */.login_face {position: absolute;top: -28%;left: 50%;width: 200px;height: 200px;background-color: #fff;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}/* 熊猫眼睛 */.login_eyes {position: relative;top: 55px;margin: 0 auto;width: 170px;}.login_eyes_left ,.login_eyes_right{position: absolute;width: 75px;height: 50px;background-color: #000;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;}.login_eyes_left {left: 0;transform: rotate(135deg);-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);}.login_eyes_right {right: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}.login_eyes_item {box-sizing: border-box;padding-top: 5px;margin: 10px auto;width: 30px;height: 30px;background-color: #fff;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.login_eyes_cont_left,.login_eyes_cont_right {position: relative;width: 20px;height: 20px;background-color: #000;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.login_eyes_cont_left {top: -5px;left: 8px;}.login_eyes_cont_right {top: 5px;left: 8px;}/* 熊猫鼻子 */.login_nose {margin: 115px auto 0;width: 40px;height: 20px;background-color: #000;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;}/* 用户登录 */.login_item {position: relative;z-index: 9999;box-sizing: border-box;padding-top: 15px;width: 500px;height: 300px;background-color: #fff;box-shadow: 2px 2px 5px rgb(119, 119, 119);}.login_language {margin: 0 10px 0 0;text-align: right;font-size: 12px;cursor: pointer;}.login_item h2 {margin-bottom: 20px;font-size: 25px;text-align: center;color: rgb(52,199,158);}.login_cont {margin: 0 auto 10px;padding-left: 10px;width: 400px;height: 30px;border-bottom: 1px solid rgb(151, 151, 151);}.login_cont.bbRed {border-bottom: 1px solid red;}.login_cont.bbBlue {border-bottom: 1px solid rgb(52,199,158);}#nickName ,#passWord {width: 100%;outline: none;border: 0;}.login_btn {display: block;margin: 0 auto;width: 130px;height: 35px;border: 0;color: white;background-color: rgb(52,199,158);}.login_txt {overflow: hidden;margin: 0 auto;width: 410px;height: 20px;font-size: 12px;margin-bottom: 20px;}.login_txt_cont {position: relative;top: -25px;transition: top 0.4s;-webkit-transition: top 0.4s;-moz-transition: top 0.4s;-ms-transition: top 0.4s;-o-transition: top 0.4s;}.login_txt_cont.active {top: 0;}.login_caution {vertical-align: middle;padding: 0px 6px;background-color: red;color: #fff;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.login_caution_uname ,.login_caution_pwd {color: red;}/* 熊猫的手 */.login_hand {position: absolute;top: 20%;width: 500px;}.login_hand ul {list-style: none;}.login_hand_left , .login_hand_right{position: absolute;top: 13.5px;}.login_hand_left {left: -16.5px;}.login_hand_right {right: -16.5px;}.login_hand_left.active {top: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}.login_hand_right.active {transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);}.login_hand_left li ,.login_hand_right li{position: relative;width: 40px;height: 25px;background-color: #000;border-radius: 25px;-webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;}.login_hand li:nth-of-type(2) {top: -10px;}.login_hand li:nth-of-type(3) {top: -20px;}/* 登录成功 */.register_enter {position: absolute;top: 50%;left: 50%;width: 120px;height: 35px;text-align: center;line-height: 35px;color: white;background-color: #7F7F7F;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;opacity: 0;transition: opacity .3s;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-ms-transition: opacity .3s;-o-transition: opacity .3s;}.register_enter.active {opacity: 1;}/* 熊猫的脚 */.login_footer {position: relative;top: -40px;z-index: 9999;margin: 0 auto;width: 370px;}.login_footer_left ,.login_footer_right{position: absolute;width: 90px;height: 120px;background-color: #000;border-radius: 25px 25px 50% 50%;-webkit-border-radius: 25px 25px 50% 50%;-moz-border-radius: 25px 25px 50% 50%;-ms-border-radius: 25px 25px 50% 50%;-o-border-radius: 25px 25px 50% 50%;}.login_footer_right {right: 0;}.login_footer_bg {position: relative;top: -6px;z-index: 9999;width: 90px;height: 50px;background-color: #000;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;}.login_feet {position: relative;top: -35px;margin: 0 auto;width: 70px;}.login_feet li {position: absolute;width: 20px;height: 30px;z-index: 9999;background-color: #222222;border-radius: 45%;-webkit-border-radius: 45%;-moz-border-radius: 45%;-ms-border-radius: 45%;-o-border-radius: 45%;}.login_feet li:nth-of-type(2) {top: -10px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}.login_feet li:nth-of-type(3) {right: 0;}.login_arch {margin: -5px auto;width: 50px;height: 65px;z-index: 9999;background-color: #222222;border-radius: 45%;-webkit-border-radius: 45%;-moz-border-radius: 45%;-ms-border-radius: 45%;-o-border-radius: 45%;}/* 熊猫屁股 */.login_arse {position: absolute;bottom: -40px;left: 150px;z-index: -1;width: 200px;height: 150px;background-color: #fff;border-radius: 100px;-webkit-border-radius: 100px;-moz-border-radius: 100px;-ms-border-radius: 100px;-o-border-radius: 100px;box-shadow: 2px 2px 5px rgb(104, 104, 104);}
JavaScript部分
this.addEventListener('load', function () {//获取标题let loginTitle = document.querySelector('.login_title');//获取登录按钮let loginBtn = document.querySelector('.login_btn');//获取用户名和密码let nickName = document.querySelector('#nickName');let passWord = document.querySelector('#passWord');//获取左右手let loginHandLeft = document.querySelector('.login_hand_left');let loginHandRight = document.querySelector('.login_hand_right');//默认左右手的初始位置为0let handTop = 0let handNum = 0//默认定时器为空let timer = null//密码框点击事件passWord.addEventListener('click', function () {loginHandLeft.classList.add('active') //左手旋转45度loginHandRight.classList.add('active') //右手旋转-45度timer = setInterval(function () { if (loginHandLeft.style.top == '-135px' || loginHandLeft.style.left == '165px') { //满足判断条件清除定时器clearInterval(timer) timer = null} else {//每隔20ms 增加一次位移handTop -= 13.5 handNum += 16.5 loginHandLeft.style.top = handTop + 'px'loginHandLeft.style.left = handNum + 'px'loginHandRight.style.top = handTop + 'px'loginHandRight.style.right = handNum + 'px'if (loginHandLeft.style.top == '-135px' || loginHandLeft.style.left == '170px') {loginHandLeft.style.top = handTop + 'px'loginHandLeft.style.left = handNum + 'px'loginHandRight.style.top = handTop + 'px'loginHandRight.style.right = handNum + 'px'//回到原点,清除定时器clearInterval(timer)timer = null}}}, 20)})//密码框失焦事件passWord.addEventListener('blur', function () {loginHandLeft.classList.remove('active') //清除旋转loginHandRight.classList.remove('active') //清除旋转timer = setInterval(function () {if (loginHandLeft.style.left == '-16.5px') {//满足判断条件清除定时器clearInterval(timer)timer = null} else {//每隔20ms 还原一次位移handTop += 13.5handNum -= 16.5loginHandLeft.style.top = handTop + 'px'loginHandLeft.style.left = handNum + 'px'loginHandRight.style.top = handTop + 'px'loginHandRight.style.right = handNum + 'px'if (loginHandLeft.style.left == '-17px') {loginHandLeft.style.top = handTop + 'px'loginHandLeft.style.left = handNum + 'px'loginHandRight.style.top = handTop + 'px'loginHandRight.style.right = handNum + 'px'//回到原点,清除定时器clearInterval(timer)timer = null}}}, 20)})//获取弹出警告let loginCautionUname = document.querySelector('.login_caution_uname');let loginCautionPwd = document.querySelector('.login_caution_pwd');//简体中文 Chinesefunction Chinese() {loginTitle.textContent = '用户登录'nickName.placeholder = '用户名'passWord.placeholder = '密 码'// ------ \xa0 空格loginCautionUname.textContent = '请输入正确的用户名'loginCautionPwd.textContent = '请输入正确的密码'loginBtn.textContent = '登录'}//英文 Englishfunction English() {loginTitle.textContent = 'LOGIN'nickName.placeholder = 'UserName'passWord.placeholder = 'PassWord'loginCautionUname.textContent = 'Please enter a correct user name'loginCautionPwd.textContent = 'Please enter the correct password'loginBtn.textContent = 'Login'}//改变语言文字let loginLanguageSpan = document.querySelectorAll('.login_language > span');//遍历两种语言loginLanguageSpan.forEach(function (itemLanguage, iLanguage) {//点击事件转换语言itemLanguage.addEventListener('click', function () {if (itemLanguage.textContent === '简体中文') {//点击事件排他for (let i = 0; i < loginLanguageSpan.length; i++) {loginLanguageSpan[i].className = ''}Chinese()itemLanguage.className = 'active'} else {//点击事件排他for (let i = 0; i < loginLanguageSpan.length; i++) {loginLanguageSpan[i].className = ''}English()itemLanguage.className = 'active'}})})//封装识别语言//用户名识别语言function languageU(Chinese,English) {loginLanguageSpan.forEach(function (itemLanguage, iLanguage) {if (itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {loginCautionUname.textContent = English} else {loginCautionUname.textContent = Chinese}})}//密码框识别语言function languageP(Chinese,English) {loginLanguageSpan.forEach(function (itemLanguage, iLanguage) {if (itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {loginCautionPwd.textContent = English} else {loginCautionPwd.textContent = Chinese}})}//获取用户名,密码框下弹出警告内容let loginCOntUname = document.querySelector('.login_cont_uname');let loginContPwd = document.querySelector('.login_cont_pwd');let loginTxtPass = document.querySelector('.login_txt_pass');let loginTxtUname = document.querySelector('.login_txt_uname');//用户名失焦事件nickName.addEventListener('blur', function () {loginUser()})//密码框失焦事件passWord.addEventListener('blur', function () {loginPass()})//找到本地存储的保存对象let loginStr = localStorage.getItem('str')//将本地存储空间的 str 通过JOSN转换为对象loginStr = JSON.parse(loginStr)let flag = false// console.log(loginStr);loginBtn.addEventListener('click', function () {let registerEnter = document.querySelector('.register_enter');loginStr.forEach((item, i) => {console.log(loginStr, '11', item.nickName);if (nickName.value === item.nickName && passWord.value === item.passWord) {registerEnter.classList.add('active')timer = setInterval(() => {location.href = `./login_win.html?nickName=${nickName.value}`flag = true}, 1000)}})})//封装判断语句//用户名判断语句function loginUser() {let flag = falseloginStr.forEach((item, i) => {if (nickName.value === item.nickName) {loginTxtUname.classList.remove('active')loginCOntUname.classList.remove('bbRed')loginCOntUname.classList.add('bbBlue')flag = true}})if (flag === false) {loginTxtUname.classList.add('active')loginCOntUname.classList.add('bbRed')loginCOntUname.classList.remove('bbBlue')languageU('请输入正确的用户名','Please enter a correct user name')}if (nickName.value === '') {languageU('请输入用户名','Please enter a user name')}}//密码框判断语句function loginPass() {let flag = falseloginStr.forEach((item, i) => {if (passWord.value === item.passWord) {loginTxtPass.classList.remove('active')loginContPwd.classList.remove('bbRed')loginContPwd.classList.add('bbBlue')flag = true} })if ( flag === false){loginTxtPass.classList.add('active')loginContPwd.classList.add('bbRed')loginContPwd.classList.remove('bbBlue')languageP('请输入正确的密码','Please enter the correct password')}if (passWord.value === '') {languageP('请输入密码','Please enter your password')}if (nickName.value === '') {languageP('请先输入用户名','Please enter a user name first')passWord.value = ''}}})
注册界面
注册界面效果图如下
HTML部分
<div class="register"><!-- 熊猫头部 --><div class="register_header"><!-- 熊猫耳朵 --><div class="register_ear"><div class="register_ear_left"></div><div class="register_ear_right"></div></div><!-- 熊猫的脸 --><div class="register_face"><div class="register_eyes"><div class="register_eyes_left"><div class="register_eyes_item"><div class="register_eyes_cont_left"></div></div></div><div class="register_eyes_right"><div class="register_eyes_item"><div class="register_eyes_cont_right"></div></div></div></div><div class="register_nose"></div></div></div><!-- 登录主体 --><div class="register_item" ><div class="register_language"><span class="active">简体中文</span> |<span>English</span></div><h2 class="register_title">用户注册</h2><div class="register_cont register_cont_uname"><input type="text" name="nickName" id="nickName" placeholder="用户名"></div><div class="register_txt"><div class="register_txt_cont register_txt_uname"><span class="register_caution">!</span><span class="register_caution_uname">请输入5-16位用户名</span></div></div><div class="register_cont register_cont_pwd"><input type="password" name="passWord" id="passWord" placeholder="密 码"></div><div class="register_txt"><div class="register_txt_cont register_txt_pass"><span class="register_caution">!</span><span class="register_caution_pwd">请输入8-20位密码</span></div></div><div class="register_cont register_cont_pwd_second"><input type="password" name="passWord" id="passWord_second" placeholder="确认密码"></div><div class="register_txt"><div class="register_txt_cont register_txt_pass_second"><span class="register_caution">!</span><span class="register_caution_pwd_second">请确认密码</span></div></div><div class="register_cont register_cont_phone"><input type="text" name="telephone" id="telephone" placeholder="手机号"></div><div class="register_txt"><div class="register_txt_cont register_txt_phone"><span class="register_caution">!</span><span class="register_caution_phone">请输入手机号</span></div></div><div class="register_cont register_cont_verification"><input type="text" name="verification" id="verification" placeholder="验证码"><button type="button" id="verification_on">获取验证码</button></div><div class="register_txt"><div class="register_txt_cont register_txt_verification"><span class="register_caution">!</span><span class="register_caution_verification">请输入验证码</span></div></div><button class="register_btn">注册</button><div class="register_enter"><p>注册成功~</p></div><!-- 熊猫的手 --><div class="register_hand"><ul class="register_hand_left"><li></li><li></li><li></li></ul><ul class="register_hand_right"><li></li><li></li><li></li></ul></div></div><!-- 熊猫的脚 --><div class="register_footer"><div class="register_footer_left"><div class="register_footer_bg"></div><ul class="register_feet"><li></li><li></li><li></li></ul><div class="register_arch"></div></div><div class="register_footer_right"><div class="register_footer_bg"></div><ul class="register_feet"><li></li><li></li><li></li></ul><div class="register_arch"></div></div></div><!-- 熊猫屁股 --><div class="register_arse"></div></div>
CSS部分
*{margin: 0;padding: 0;}html,body {width: 100%;height: 100%;background-color: rgb(52,199,158);}ul {list-style: none;}/* 登录界面 */.register {position: absolute;top: 50%;left: 50%;width: 500px;height: 300px;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);}/* 熊猫头部 */.register_header {position: absolute;top: -25%;left: 50%;width: 200px;height: 200px;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}.register_ear {position: relative;top: -33%;height: 70px;}.register_ear_left ,.register_ear_right{position: absolute;width: 70px;height: 70px;background-color: black;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.register_ear_left {left: 0;}.register_ear_right {right: 0;}/* 熊猫脸部 */.register_face {position: absolute;top: -28%;left: 50%;width: 200px;height: 200px;background-color: #fff;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}/* 熊猫眼睛 */.register_eyes {position: relative;top: 55px;margin: 0 auto;width: 170px;}.register_eyes_left ,.register_eyes_right{position: absolute;width: 75px;height: 50px;background-color: #000;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;}.register_eyes_left {left: 0;transform: rotate(135deg);-webkit-transform: rotate(135deg);-moz-transform: rotate(135deg);-ms-transform: rotate(135deg);-o-transform: rotate(135deg);}.register_eyes_right {right: 0;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}.register_eyes_item {box-sizing: border-box;padding-top: 5px;margin: 10px auto;width: 30px;height: 30px;background-color: #fff;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.register_eyes_cont_left,.register_eyes_cont_right {position: relative;width: 20px;height: 20px;background-color: #000;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.register_eyes_cont_left {top: -5px;left: 8px;}.register_eyes_cont_right {top: 5px;left: 8px;}/* 熊猫鼻子 */.register_nose {margin: 115px auto 0;width: 40px;height: 20px;background-color: #000;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;}/* 用户登录 */.register_item {position: relative;z-index: 9999;box-sizing: border-box;padding-top: 15px;width: 500px;height: 550px;background-color: #fff;box-shadow: 2px 2px 5px rgb(119, 119, 119);}/* 语言 */.register_language {margin: 0 10px 0 0;text-align: right;font-size: 12px;cursor: pointer;}/* 标题 */.register_item h2 {margin-bottom: 20px;font-size: 25px;text-align: center;color: rgb(52,199,158);}.register_cont {position: relative;margin: 0 auto 10px;padding-left: 10px;width: 400px;height: 30px;border-bottom: 1px solid rgb(151, 151, 151);}.register_cont.bbRed {border-bottom: 1px solid red;}.register_cont.bbBlue {border-bottom: 1px solid rgb(52,199,158);}.register_cont input {width: 100%;outline: none;border: 0;}/* 验证码 */#verification {width: 70%;}#verification_on {position: absolute;top: 0;right: 0;font-size: 12px;width: 30%;height: 30px;background-color: #222222;border: 0;color: #fff;}/* 注册提交按钮 */.register_btn {display: block;margin: 0 auto;width: 130px;height: 35px;border: 0;color: white;background-color: rgb(52,199,158);}.register_txt {overflow: hidden;margin: 0 auto;width: 410px;height: 20px;font-size: 12px;margin-bottom: 20px;}.register_txt_cont {position: relative;top: -25px;transition: top 0.4s;-webkit-transition: top 0.4s;-moz-transition: top 0.4s;-ms-transition: top 0.4s;-o-transition: top 0.4s;}.register_txt_cont.active {top: 0;}.register_caution {vertical-align: middle;padding: 0px 6px;background-color: red;color: #fff;border-radius: 100%;-webkit-border-radius: 100%;-moz-border-radius: 100%;-ms-border-radius: 100%;-o-border-radius: 100%;}.register_txt_cont span:nth-of-type(2) {color: red;}/* 熊猫的手 */.register_hand {position: absolute;top: 20%;width: 500px;}.register_hand ul {list-style: none;}.register_hand_left , .register_hand_right{position: absolute;top: 13.5px;/* transition: all .5s;-webkit-transition: all .5s;-moz-transition: all .5s;-ms-transition: all .5s;-o-transition: all .5s; */}.register_hand_left {left: -16.5px;}.register_hand_right {right: -16.5px;}.register_hand_left.active {top: 0;/* top: -135px;left: 170px; */transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);}.register_hand_right.active {/* top: -135px;right: 170px; */transform: rotate(-45deg);-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-ms-transform: rotate(-45deg);-o-transform: rotate(-45deg);}.register_hand_left li ,.register_hand_right li{position: relative;width: 40px;height: 25px;background-color: #000;border-radius: 25px;-webkit-border-radius: 25px;-moz-border-radius: 25px;-ms-border-radius: 25px;-o-border-radius: 25px;}.register_hand li:nth-of-type(2) {top: -10px;}.register_hand li:nth-of-type(3) {top: -20px;}/* 登录成功 */.register_enter {position: absolute;top: 50%;left: 50%;padding: 5px 10px;text-align: center;line-height: 35px;color: white;background-color: #7F7F7F;transform: translate(-50%,-50%);-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;opacity: 0;transition: opacity .3s;-webkit-transition: opacity .3s;-moz-transition: opacity .3s;-ms-transition: opacity .3s;-o-transition: opacity .3s;}.register_enter.active {opacity: 1;}/* 熊猫的脚 */.register_footer {position: relative;top: -40px;z-index: 9999;margin: 0 auto;width: 370px;}.register_footer_left ,.register_footer_right{position: absolute;width: 90px;height: 120px;background-color: #000;border-radius: 25px 25px 50% 50%;-webkit-border-radius: 25px 25px 50% 50%;-moz-border-radius: 25px 25px 50% 50%;-ms-border-radius: 25px 25px 50% 50%;-o-border-radius: 25px 25px 50% 50%;}.register_footer_right {right: 0;}.register_footer_bg {position: relative;top: -6px;z-index: 9999;width: 90px;height: 50px;background-color: #000;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;}.register_feet {position: relative;top: -35px;margin: 0 auto;width: 70px;}.register_feet li {position: absolute;width: 20px;height: 30px;z-index: 9999;background-color: #222222;border-radius: 45%;-webkit-border-radius: 45%;-moz-border-radius: 45%;-ms-border-radius: 45%;-o-border-radius: 45%;}.register_feet li:nth-of-type(2) {top: -10px;left: 50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);-moz-transform: translateX(-50%);-ms-transform: translateX(-50%);-o-transform: translateX(-50%);}.register_feet li:nth-of-type(3) {right: 0;}.register_arch {margin: -5px auto;width: 50px;height: 65px;z-index: 9999;background-color: #222222;border-radius: 45%;-webkit-border-radius: 45%;-moz-border-radius: 45%;-ms-border-radius: 45%;-o-border-radius: 45%;}/* 熊猫屁股 */.register_arse {position: absolute;bottom: -290px;left: 150px;z-index: -1;width: 200px;height: 150px;background-color: #fff;border-radius: 100px;-webkit-border-radius: 100px;-moz-border-radius: 100px;-ms-border-radius: 100px;-o-border-radius: 100px;box-shadow: 2px 2px 5px rgb(104, 104, 104);}
JavaScript部分
this.addEventListener('load',() => {//获取标题let registerTitle = document.querySelector('.register_title');//获取按钮let registerBtn = document.querySelector('.register_btn');//获取用户名,密码,手机号和验证码let nickName = document.querySelector('#nickName');let passWord = document.querySelector('#passWord');let passWordSecond = document.querySelector('#passWord_second');let telephone = document.querySelector('#telephone');let verification = document.querySelector('#verification');let verificationOn = document.querySelector('#verification_on');//获取左右小手let registerHandLeft = document.querySelector('.register_hand_left');let registerHandRight = document.querySelector('.register_hand_right');//设置默认小手位置let handTop = 0let handNum = 0let timer = null//小手捂眼睛function pickUp() {registerHandLeft.classList.add('active')registerHandRight.classList.add('active')timer = setInterval (function(){if (registerHandLeft.style.top == '-185px' || registerHandLeft.style.left == '165px') {clearInterval(timer)timer = null} else {handTop -= 18.5handNum += 16.5registerHandLeft.style.top = handTop + 'px'registerHandLeft.style.left = handNum + 'px'registerHandRight.style.top = handTop + 'px'registerHandRight.style.right = handNum + 'px'if (registerHandLeft.style.top == '-135px' || registerHandLeft.style.left == '170px') {registerHandLeft.style.top = handTop + 'px'registerHandLeft.style.left = handNum + 'px'registerHandRight.style.top = handTop + 'px'registerHandRight.style.right = handNum + 'px'clearInterval(timer)timer = null}}},20)}//小手放开function layDown() {registerHandLeft.classList.remove('active')registerHandRight.classList.remove('active')timer = setInterval (function(){if ( registerHandLeft.style.left == '-16.5px') {clearInterval(timer)timer = null} else {handTop += 18.5handNum -= 16.5registerHandLeft.style.top = handTop + 'px'registerHandLeft.style.left = handNum + 'px'registerHandRight.style.top = handTop + 'px'registerHandRight.style.right = handNum + 'px'if ( registerHandLeft.style.left == '-17px') {registerHandLeft.style.top = handTop + 'px'registerHandLeft.style.left = handNum + 'px'registerHandRight.style.top = handTop + 'px'registerHandRight.style.right = handNum + 'px'clearInterval(timer)timer = null}}},20)}//密码框点击事件passWord.addEventListener('click' ,() => {clearInterval(timer)timer = nullpickUp()})//再次输入密码框失焦事件passWord.addEventListener('blur' ,() => {clearInterval(timer)timer = nulllayDown()})//再次输入密码框点击事件passWordSecond.addEventListener('click' ,() => {clearInterval(timer)timer = nullpickUp()})//再次输入密码框点失焦事件passWordSecond.addEventListener('blur' ,() => {clearInterval(timer)timer = nulllayDown()})//改变语言文字let registerLanguageSpan = document.querySelectorAll('.register_language > span');registerLanguageSpan.forEach(function(itemLanguage,iLanguage) {//获取弹出警告let registerCautionUname = document.querySelector('.register_caution_uname');let registerCautionPwd = document.querySelector('.register_caution_pwd');let registerCautionPwdSecond = document.querySelector('.register_caution_pwd_second');let registerCautionPhone = document.querySelector('.register_caution_phone');let registerCautionVerification = document.querySelector('.register_caution_verification');//简体中文 Chinese// ------ \xa0 空格function Chinese() {registerTitle.textContent = '用户注册'nickName.placeholder = '用户名'passWord.placeholder = '密 码'passWordSecond.placeholder = '确认密码'telephone.placeholder = '手机号'verification.placeholder = '验证码'verificationOn.textContent = '获取验证码'registerCautionUname.textContent = '请输入6-16位用户名'registerCautionPwd.textContent = '请输入8-20位密码'registerCautionPwdSecond.textContent = '请确认密码'registerCautionPhone.textContent = '请输入11位手机号'registerCautionVerification.textContent = '请输入验证码'registerBtn.textContent = '注册'}//英文 Englishfunction English() {registerTitle.textContent = 'REGISTER'nickName.placeholder = 'UserName'passWord.placeholder = 'PassWord'passWordSecond.placeholder = 'Confirm Password'telephone.placeholder = 'Mobile'verification.placeholder = 'Verification Code'verificationOn.textContent = 'TestGetCode'registerCautionUname.textContent = 'Please enter a user name of 6 to 16 characters'registerCautionPwd.textContent = 'Please enter your 8-20 digit password'registerCautionPwdSecond.textContent = 'Please enter your password again'registerCautionPhone.textContent = 'Please enter an 11-digit mobile phone number'registerCautionVerification.textContent = 'Please enter the verification code'registerBtn.textContent = 'Register'}itemLanguage.addEventListener('click',() => {if (itemLanguage.textContent === '简体中文') {for (let i = 0 ; i <registerLanguageSpan.length ;i++) {registerLanguageSpan[i].className = ''}itemLanguage.className = 'active'Chinese()} else {for (let i = 0 ; i <registerLanguageSpan.length ;i++) {registerLanguageSpan[i].className = ''}itemLanguage.className = 'active'English()}})//获取输入框样式框//获取输入框警示文字nickName.addEventListener('blur' ,() => {registerUser()})passWord.addEventListener('blur' ,() => {registerPass()})passWordSecond.addEventListener('blur' ,() => {registerPassSecond()})telephone.addEventListener('blur' ,() => {registerTelephone()})verification.addEventListener('blur' ,() => {registerVerification()})verificationOn.addEventListener('click',() => {let countDown = 60let timerVtimerV = setInterval(() => {countDown --if (countDown !== 0) {verificationOn.disabled = trueif(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {verificationOn.textContent = `Verification ${countDown}`// console.log(111);} else {verificationOn.textContent = `验证码 ${countDown}`// console.log(222);}} else {clearInterval(timerV)timerV = nullverificationOn.disabled = falseif(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {verificationOn.textContent = 'TestGetCode'// console.log(444);} else {verificationOn.textContent = `获取验证码`// console.log(333);}}},1000)})//封装判断语句function registerUser() {let registerContUname = document.querySelector('.register_cont_uname');let registerTxtUname = document.querySelector('.register_txt_uname');if (nickName.value === '' || nickName.value.length > 16 || nickName.value.length < 5) {registerTxtUname.classList.add('active')registerContUname.classList.add('bbRed')registerContUname.classList.remove('bbBlue')if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionUname.textContent = 'Please enter a user name of 5 to 16 characters'} else {registerCautionUname.textContent = '请输入5-16位用户名'}} else {registerTxtUname.classList.remove('active')registerContUname.classList.remove('bbRed')registerContUname.classList.add('bbBlue')}}//密码function registerPass() {let registerContPwd = document.querySelector('.register_cont_pwd');let registerTxtPass = document.querySelector('.register_txt_pass');if ( passWord.value === '' || passWord.value.length < 8 || passWord.value.length > 20) {registerTxtPass.classList.add('active')registerContPwd.classList.add('bbRed')registerContPwd.classList.remove('bbBlue')if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionPwd.textContent = 'Please enter your 8-20 digit password'} else {registerCautionPwd.textContent = '请输入8-20位密码'}} else {registerTxtPass.classList.remove('active')registerContPwd.classList.remove('bbRed')registerContPwd.classList.add('bbBlue')} if (passWord.value === '') {if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionPwd.textContent = 'Please enter your 8-20 digit password'} else {registerCautionPwd.textContent = '请输入8-20位密码'}}}//确定密码function registerPassSecond() {let registerContPwdSecond = document.querySelector('.register_cont_pwd_second');let registerTxtPassSecond = document.querySelector('.register_txt_pass_second');let registerCautionPwdSecond = document.querySelector('.register_caution_pwd_second');// console.log(registerContPwdSecond,registerTxtPassSecond);if (passWordSecond.value === '') {if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionPwdSecond.textContent = 'Please enter your password'} else {registerCautionPwdSecond.textContent = '请输入密码'}}if (passWordSecond.value !== passWord.value || passWordSecond.value === '') {registerTxtPassSecond.classList.add('active')registerContPwdSecond.classList.add('bbRed')registerContPwdSecond.classList.remove('bbBlue')if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionPwdSecond.textContent = 'Please enter the same password'} else {registerCautionPwdSecond.textContent = '请确认的密码'}} else {registerTxtPassSecond.classList.remove('active')registerContPwdSecond.classList.remove('bbRed')registerContPwdSecond.classList.add('bbBlue')} if (passWord.value === '' || nickName.value === '') {if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionPwdSecond.textContent = 'Please enter your password'} else {registerCautionPwdSecond.textContent = '请先输入密码'}passWordSecond.value = ''}}//手机号function registerTelephone() {let registerContPhone = document.querySelector('.register_cont_phone');let registerTxtUPhone = document.querySelector('.register_txt_phone');if (isNaN(telephone.value)) {telephone.value = ''} else if (telephone.value === '' || telephone.value.length !== 11) {registerTxtUPhone.classList.add('active')registerContPhone.classList.add('bbRed')registerContPhone.classList.remove('bbBlue')if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionPhone.textContent = 'Please enter an 11-digit mobile phone number'} else {registerCautionPhone.textContent = '请输入11位手机号'}} else {registerTxtUPhone.classList.remove('active')registerContPhone.classList.remove('bbRed')registerContPhone.classList.add('bbBlue')}}//验证码function registerVerification() {let registerContVerification = document.querySelector('.register_cont_verification');let registerTxtUVerification = document.querySelector('.register_txt_verification');if (telephone.value === '') {registerTxtUVerification.classList.add('active')registerContVerification.classList.add('bbRed')registerContVerification.classList.remove('bbBlue')verification.value = ''if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {// console.log(222);registerCautionVerification.textContent = 'Please enter your mobile phone number first'} else {registerCautionVerification.textContent = '请先输入手机号'// console.log(111);}}else if (verification.value === '' || verification.value.length !== 4) {if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerCautionVerification.textContent = 'Please enter the verification code'} else {registerCautionVerification.textContent = '请输入验证码'}}else {registerTxtUVerification.classList.remove('active')registerContVerification.classList.remove('bbRed')registerContVerification.classList.add('bbBlue')}}})//注册提交按钮registerBtn.addEventListener('click' ,() => {let registerEnter = document.querySelector('.register_enter');let passWordArr = {nickName : nickName.value, passWord : passWord.value , telephone : telephone.value}//将字符串转换为对象let registerStr = JSON.parse(localStorage.getItem('str'))//设置一个开关let flag = falselet timerZ = nullif (registerStr && registerStr.length) {registerStr.forEach((item , i) => {if (nickName.value === item.nickName ) {//将对象转换为字符串传入本地数据库registerEnter.classList.add('active')registerLanguageSpan.forEach(function(itemLanguage,iLanguage) {if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerEnter.textContent = 'The user name is registered'} else {registerEnter.textContent = '该用户已注册'}})timerZ = setInterval(() => {registerEnter.classList.remove('active')clearInterval(timerZ)timerZ = null},1000)flag = true} })if (flag === false) {registerStr.push(passWordArr)localStorage.setItem('str' , JSON.stringify(registerStr))registerEnter.classList.add('active')registerLanguageSpan.forEach(function(itemLanguage,iLanguage) {if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {registerEnter.textContent = 'Registered Successfully'} else {registerEnter.textContent = '注册成功'}})timer = setInterval(() => {location.href = `./index.html`},1000)}} else {localStorage.setItem('str' , JSON.stringify([passWordArr]))registerEnter.classList.add('active')timer = setInterval(() => {location.href = `./index.html`},1000)}})})
代码仅供学习参考,
代码纯原创,如有转载请添加出处
