纯HTML+CSS+js实现大型企业站小米商城官网之注册页面

实现效果：点击登录页面，输入国家/地区，以及手机号码进行注册，点击立即注册之后随机生成一个四位数验证码输出到控制台，获取生成的验证码通过判断正确之后即注册成功，数据保存到本地浏览器中

实现思路：

1、对立即注册按钮设置一个点击事件，在点击事件内部判断手机号如果符合条件，则显示下一个获取验证码的页面

2、通过setInterval设置验证码倒计时（60）秒，定义一个随机生成四位数的函数方法

3、对下一步按钮设置点击事件，获取到刚刚保存在本地浏览器的验证码并进行判断

4、设置密码

5、如果两次输入的密码正确，则跳转到首页并显示已登录，将数据保存到本地浏览器中

源代码：

HTML部分

<section class="main">
        <div class="logo">
            <img src="./img/header/logo.png" alt="">
        </div>
        <h1 class="title_big30">注册小米帐号</h1>
        <!-- 注册页面 -->
        <div class="regbox">
            <h4>国家/地区</h4>
            <input type="text" placeholder="国家" class="countryinput">
            <div class="region_tip_text">成功注册帐号后，国家/地区将不能被修改</div>
            <h4 class="title-4">手机号码</h4>
            <div class="phone">
                <input id="text" type="tel" name="phone" data-type="PH" placeholder="请输入手机号码">
            </div>
            
            <!-- 错误信息提示 -->
            <div class="err_tip"></div>

            <input id="btn" class="btnGroup btn_reg_1 submit-step" data-to="phone-step2" type="submit" value="立即注册">
        </div>
        <!-- 验证码页面 -->
        <div class="regboxTwo">
            <div class="step2_txt">
                <p>我们已经发送一条验证短信至<span class="address-place">+86 13660354891</span></p>
                <p>请输入短信中的验证码</p>
                <div class="inputcode">
                    <input class="inputcode_txt" type="text" placeholder="请输入验证码" name="">
                    <button class="resend">重新发送</button>
                </div>
                <div class="err_tip">
                   !请输入短信验证码
                </div>
                <div class="not_receive">
                    <a href="#">收不到验证码？</a>
                </div>
                <input class="btnGroup btn_reg_1  submit-step" type="submit" value="下一步">
                <input class="btnGroup btn_reg_2 back-step" data-to="phone-step1" type="button" value="返回">
            </div>
        </div>
        <!-- 设置密码 -->
        <div class="regboxthree">
            <div class="step2_txt">
                <p>您注册的手机号码为：<span class="address-place">00000000000</span></p>
                <p class="title">请设置您的密码：</p>
                <input class="inputpassword" type="password" placeholder="请输入密码" name="ticket">
                <div class="err_tip">请再次输入密码</div>
                <input class="inputpassword" type="password" placeholder="请再输入一次密码" name="tickettwo">
                <div class="err_tip">
                   错误信息提示
                </div>
                <p class="title_tis">密码长度8~16位,数字、字母、字符至少包含两种</p>
                <input class="btnGroup btn_reg_1  submit-step" type="submit" value="提交">
            </div>
        </div>
        <!-- 账号显示 -->
        <div class="regbox-account">
            <div class="step2_txt">
                <p>您的小米ID：<span class="address-place">00000000</span></p>
                <input class="btnGroup btn_reg_1  submit-step" type="submit" value="登录">
            </div>
        </div>
    </section>

js部分：

       var xiaomi = {
    start(){
        this.register();
    },
    // 立即注册
    register(){
        let btn = document.getElementById('btn');
        let error = document.getElementsByClassName('err_tip')[0];
        let text = document.getElementById('text');
        btn.onclick = function() {
            if (text.value) {
                if (/^1[3-9]\d{9}$/.test(text.value)) {
                    sessionStorage.setItem("phone", text.value);
                    document.getElementsByClassName('regbox')[0].style.display = 'none';
                    document.getElementsByClassName('regboxTwo')[0].style.display = 'block';
                    xiaomi.verification();
                }
                else {
                    error.style.display = 'block';
                    error.innerHTML = '手机号码格式不正确';
				}
            }else {
                error.style.display = 'block';
                error.innerHTML = '请输入手机号码';
			}
        }
        text.onclick = function() {
			error.style.display = 'none';
		}
    },

    //验证码验证
    verification(){
        let phone = sessionStorage.getItem("phone");
        //设置电话号码
        document.getElementsByClassName('address-place')[0].innerHTML = '+'+ 86 + " " + phone;

        let resendBtn = document.getElementsByClassName('resend')[0];
        let inputcodeTxt = document.getElementsByClassName('inputcode_txt')[0];
        let submitStep = document.getElementsByClassName('submit-step')[1];
        let backStep = document.getElementsByClassName('back-step')[0];
        let error = document.getElementsByClassName('err_tip')[1];

        // 设置获取验证码倒计时
        resendBtn.innerHTML = "重新发送(60)";

        function timer() {
			let timeSet = 60;
			resendBtn.disabled = 'disabled';
			let time = setInterval(function() {
				timeSet--;
				resendBtn.innerHTML = "重新发送(" + timeSet + ")";
				if (timeSet == 0) {
					clearInterval(time);
					resendBtn.innerHTML = "重新发送";
					resendBtn.disabled = false;
				}
			}, 1000);
        }
        timer();

        resendBtn.onclick = function() {
			timer();
        }
        
        // 随机生成四位数
		function numBer() {
			let num = '';
			for (let i = 0; i < 4; i++) {
				num += parseInt((Math.random() * 10));
			}
			console.log(num);
			return num;
		}
        let num = numBer();

        // 下一步
        submitStep.onclick = function(){
            if(inputcodeTxt.value){
                if(inputcodeTxt.value == num){
                    document.getElementsByClassName('regboxTwo')[0].style.display = 'none';
                    document.getElementsByClassName('regboxthree')[0].style.display = 'block';
                    xiaomi.regboxthree();
                }else{
                    error.style.display = 'block';
                    error.innerHTML = '验证码错误或已过期';
                }
            }else{
                error.style.display = 'block';
            }
        }
        // 返回
		backStep.onclick = function() {
			document.getElementsByClassName('regbox')[0].style.display = 'block';
			document.getElementsByClassName('regboxTwo')[0].style.display = 'none';
		}
    },

    //设置密码
    regboxthree(){
        let phone = sessionStorage.getItem("phone");
        document.getElementsByClassName('address-place')[1].innerHTML = phone;

        let btn = document.getElementsByClassName('submit-step')[2];
        let inputpassword1 = document.getElementsByClassName('inputpassword')[0];
        let inputpassword2 = document.getElementsByClassName('inputpassword')[1];
        let error = document.getElementsByClassName('err_tip')[2];
        let error1 = document.getElementsByClassName('err_tip')[3];

        let password = /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?![^(0-9a-zA-Z)]+$).{8,16}$/;

        btn.onclick = function(){
            if(inputpassword1.value){
                if(password.test(inputpassword1.value)){
                    if (inputpassword2.value){
                        if(inputpassword1.value==inputpassword2.value){
                            sessionStorage.setItem("pwd", inputpassword1.value);
                            document.getElementsByClassName('regboxthree')[0].style.display = 'none';
                            document.getElementsByClassName('regbox-account')[0].style.display = 'block';
                            xiaomi.login();
                        }else{
                            error1.style.display = 'block';
					        error1.innerHTML = '两次密码不一样';
                        }
                    }else{
                        error1.style.display = 'block';
					    error1.innerHTML = '请再输入一次密码';
                    }
                }else{
                    error.style.display = 'block';
					error.innerHTML = '密码格式不对';
                }
            }else{
                error.style.display = 'block';
                error.innerHTML = '请输入密码';
            }
        }
        inputpassword1.onclick = function(){
            error.style.display = 'none';
			error1.style.display = 'none';
        }
        inputpassword2.onclick = function(){
            error.style.display = 'none';
			error1.style.display = 'none';
        }

    },
    //登录
    login(){
        let btn = document.getElementsByClassName('submit-step')[3];
        let num = '';
        for (let i = 0; i < 7; i++) {
			num += parseInt((Math.random() * 10));
        }
        document.getElementsByClassName('address-place')[2].innerHTML = num;
        sessionStorage.setItem("idaccount", num);

        btn.onclick = function(){
            window.location.href = 'login.html';
        }
    }
    
}

window.onload = function(){
    xiaomi.start();
}

以上，初步能够实现基本登陆效果，不足之处欢迎各位大佬指正~~~       一个不会前端的小白~~