原生JS熊猫登录注册验证,获取本地存储loaclStroage的用户名

原创 于 2022-05-14 15:05:41 发布 · 693 阅读 · 11 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #html #css

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="密&nbsp;&nbsp;&nbsp;码">
            </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');
    //默认左右手的初始位置为0
    let handTop = 0
    let 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.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.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');
    //简体中文 Chinese
    function Chinese() {
        loginTitle.textContent = '用户登录'
        nickName.placeholder = '用户名'
        passWord.placeholder = '密   码'
        // ------ \xa0 空格
        loginCautionUname.textContent = '请输入正确的用户名'
        loginCautionPwd.textContent = '请输入正确的密码'
        loginBtn.textContent = '登录'
    }
    //英文 English
    function 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 = false
        loginStr.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 = false
        loginStr.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="密&nbsp;&nbsp;&nbsp;码">
            </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 = 0
    let handNum = 0
    let 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.5
                handNum += 16.5
                registerHandLeft.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.5
                handNum -= 16.5
                registerHandLeft.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 = null
        pickUp()
    })
    //再次输入密码框失焦事件
    passWord.addEventListener('blur' ,() => {
        clearInterval(timer)
        timer = null
        layDown()
    })
    //再次输入密码框点击事件
    passWordSecond.addEventListener('click' ,() => {
        clearInterval(timer)
        timer = null
        pickUp()
    })
    //再次输入密码框点失焦事件
    passWordSecond.addEventListener('blur' ,() => {
        clearInterval(timer)
        timer = null
        layDown()
    })
    //改变语言文字
    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 = '注册'
        }
        //英文 English
        function 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 = 60
            let timerV
            timerV = setInterval(() => {
                countDown --
                if (countDown !== 0) {
                    verificationOn.disabled = true
                    if(itemLanguage.className === 'active' && itemLanguage.textContent === 'English') {
                        verificationOn.textContent = `Verification ${countDown}`
                        // console.log(111);
                    } else {
                        verificationOn.textContent = `验证码 ${countDown}`
                        // console.log(222);
                    }
                } else {
                    clearInterval(timerV)
                    timerV = null
                    verificationOn.disabled = false
                    if(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 = false
        let timerZ = null
        if (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)
        }
    })
})

代码仅供学习参考,

代码纯原创,如有转载请添加出处

评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值