实现效果：点击登录页面，输入国家/地区，以及手机号码进行注册，点击立即注册之后随机生成一个四位数验证码输出到控制台，获取生成的验证码通过判断正确之后即注册成功，数据保存到本地浏览器中
实现思路：
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();}
以上，初步能够实现基本登陆效果，不足之处欢迎各位大佬指正~~~ 一个不会前端的小白~~
如果觉得《纯HTML+CSS+js实现大型企业站小米商城官网之注册页面》对你有帮助，请点赞、收藏，并留下你的观点哦！
