當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

前端代码整理-迷你登录页面

發布時間：2023/12/31 HTML 26 豆豆

生活随笔收集整理的這篇文章主要介紹了前端代码整理-迷你登录页面小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

登錄頁面很多,但是我需要的是拿來即可用.不用重復造輪子的登錄代碼

我已經代碼整理到一個頁面

<!doctype html> <html> <head><meta charset="utf-8"><title>迷你登錄</title><meta name="viewport" content="width=device-width,height=device-height,initial-scale=1, maximum-scale=1"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="default"><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script><script src="https://cdn.bootcss.com/layer/3.0.3/layer.min.js"></script><style>html {}body {font-family: "Microsoft Yahei";font-size: 12px;margin: 0;}ul {padding: 0;margin: 0;}ul li {list-style-type: none;}a {text-decoration: none;}a:hover {text-decoration: none;color: #f00;}.cl {clear: both;}input[type="text"]:focus,input[type="password"]:focus {outline: none;}input::-ms-clear {display: none;}.login {border-bottom: none;margin: 0px;/*width: 370px;*/}.header {border-bottom: 1px solid #e2e2e2;position: relative;font-family: "Microsoft Yahei";background-color: #52B1E1;height: 35px;}.header .switch {/*position: absolute;*//*left: 60px;*/bottom: 0;font-size: 16px;/*height: 45px;*/}.header .switch #switch_qlogin {margin-right: 85px;}.header .switch .switch_btn {color: #999;display: inline-block;height: 45px;line-height: 45px;outline: none;*hide-focus: expression(this.hideFocus=true);}.header .switch .switch_btn_focus {color: #333;display: inline-block;height: 45px;line-height: 45px;outline: none;*hide-focus: expression(this.hideFocus=true);}.header .switch .switch_btn:hover {color: #333;text-decoration: none;}.header .switch .switch_btn_focus:hover {text-decoration: none;}#switch_bottom {position: absolute;bottom: -1px;_bottom: -2px;border-bottom: 2px solid #848484;}.web_login {position: relative;/*width: 370px;*/}#web_login {_left: 60px;*left: 0;}.web_login .login_form {width: 272px;margin: 0 auto;}.web_login .reg_form {width: 300px;margin: 0 auto;}.web_login .input-tips {float: left;margin-top: 10px;width: 50px;height: 42px;font-size: 16px;line-height: 42px;font-family: "Hiragino Sans GB", "Microsoft Yahei";}.web_login .input-tips2 {float: left;text-align: right;padding-right: 10px;width: 75px;height: 30px;font-size: 16px;margin-top: 10px;clear: both;line-height: 30px;font-family: "Hiragino Sans GB", "Microsoft Yahei";}.web_login .inputOuter {width: 200px;height: 42px;margin-top: 10px;float: left;}.web_login .inputOuter2 {width: 200px;margin-top: 6px;margin-top: 5px \9;float: left;}.web_login .inputOuter3 {width: 218px;margin-top: 6px;margin-top: 5px \9;float: left;}.web_login .inputstyle {width: 200px;height: 38px;padding-left: 5px;line-height: 30px;line-height: 38px;border: 1px solid #52B1E1;background: #fff;color: #333;border-radius: 2px;font-family: Verdana, Tahoma, Arial;font-size: 16px;}.web_login input.inputstyle2:focus,.web_login input.inputstyle:focus {border: 1px solid #198BD4;box-shadow: 0 0 2px #198BD4;}.web_login .inputstyle2 {width: 200px;height: 30px;padding-left: 5px;line-height: 30px;/*border: 1px solid #D7D7D7;*/border: 1px solid #52B1E1;background: #fff;color: #333;border-radius: 2px;font-family: Verdana, Tahoma, Arial;font-size: 12px;}.web_login .uinArea {height: 55px;position: relative;z-index: 10;}.web_login .pwdArea {height: 55px;margin-bottom: 10px;position: relative;z-index: 3;}.web_qr_login {position: relative;overflow: hidden;}.cue {height: 40px;line-height: 40px;font-size: 14px;border: 1px #CCCCCC solid;margin-top: 10px;margin-bottom: 5px;text-align: center;font-family: "Hiragino Sans GB", "Microsoft Yahei";}.login {background-color: #ffffff;}h1 {margin: 80px auto 50px auto;text-align: center;color: #fff;margin-left: -25px;font-size: 35px;font-weight: bold;text-shadow: 0px 1px 1px #555;}h1 sup {font-size: 18px;font-style: normal;position: absolute;margin-left: 10px;}.login {border: 0;background: #fff;margin: 0 auto;/*padding: 5px 0;*/}.web_login {padding-bottom: 20px;}.jianyi {color: #fff;text-align: center;margin-top: 25px;color: #B3B8C4;}.reg_form li {height: 55px;}.cue {margin-top: 15px;margin-bottom: 10px;border: 1px solid #eee;border-radius: 3px;}.web_login input.inputstyle2:focus,.web_login input.inputstyle:focus {border: 1px solid #5796f;box-shadow: 0 0 0;}.web_login .reg_form {margin: 0 auto;width: 325px;}.web_login .inputstyle2 {border-radius: 2px;width: 215px;}.web_login .input-tips2 {padding-right: 5px;width: 80px;_width: 75px;_font-size: 12px;}.web_login .inputstyle3 {border-radius: 2px;width: 132px;}.web_login .inputstyle3 {height: 30px;padding-left: 5px;line-height: 30px;border: 1px solid #52B1E1;background: #fff;color: #333;border-radius: 2px;font-family: Verdana, Tahoma, Arial;font-size: 12px;}.button_blue {display: inline-block;float: left;height: 41px;border-radius: 4px;background: #2795dc;border: none;cursor: pointer;border-bottom: 3px solid #0078b3;*border-bottom: none;color: #fff;font-size: 16px;padding: 0 10px;*width: 140px;text-align: center;outline: none;font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;}input.button_blue:hover {background: #0081c1;border-bottom: 3px solid #006698;*border-bottom: none;color: #fff;text-decoration: none;}a.zcxy {text-decoration: underline;line-height: 58px;margin-left: 15px;color: #959ca8;cursor: pointer;}.web_login .login_form {margin-top: 30px;}.web_login .uinArea {height: 60px;}.header .switch {/*left: 70px;*/}.getcode {text-align: center;height: 39px;line-height: 39px;border: #ccc 1px solid;background: #2795dc;border: none;border-bottom: 3px solid #0078b3;padding: 0px;color: #fff;font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;float: right;}.getcode:hover {background: #0081c1;border-bottom: 3px solid #006698;color: #fff;text-decoration: none;}.us_input {border-radius: 4px;font-size: 14px;}.text_input {width: 76px;height: 32px;line-height: 32px;padding: 0;cursor: pointer;}.roe-sign {display: none;}.roe-sign, .roe-login {height: 35px;line-height: 35px;padding-left: 20px;color: #fff;}.roe-sign strong, .roe-login strong {font-size: 16px;font-weight: normal;}.roe-sign span, .roe-login span {font-size: 12px;}.roe-sign a, .roe-login a {background-color: #D31E50;padding: 3px 8px;color: #fff;font-size: 14px;border-radius: 4px;}</style> </head><body> <div class="login"><div class="header"><div class="roe-sign"><strong>注冊賬號 | </strong><span>已有賬號，</span><a class="switch_btn_focus" id="switch_qlogin" href="javascript:;" tabindex="7">請登陸</a></div><div class="roe-login"><strong>登陸 | </strong><span>還沒有賬號，</span><a class="switch_btn_focus" id="switch_login" href="javascript:;" tabindex="8">請注冊</a></div></div><div class="web_qr_login" id="web_qr_login" style="display: block; height: 235px;"><div class="web_login" id="web_login"><div class="login-box"><div class="login_form"><form action="?act=login" method="post" enctype="application/x-www-form-urlencoded" name="loginform"id="login_form" class="loginForm" onSubmit="return validates()"><div class="uinArea" id="uinArea"><label class="input-tips" for="username">帳號：</label><div class="inputOuter" id="uArea"><input type="text" id="username" name="username" class="inputstyle"/></div></div><div class="pwdArea" id="pwdArea"><label class="input-tips" for="password">密碼：</label><div class="inputOuter" id="pArea"><input type="password" id="password" name="password" class="inputstyle"/></div></div><div style="padding-left:30px;margin-top:20px;"><input type="submit" value="登錄" style="width:150px;" class="button_blue"/><a onClick="layer.msg('忘記密碼，請聯系客服！',{shift: 6});" class="zcxy" target="_blank">忘記密碼</a></div></form></div></div></div></div><div class="qlogin" id="qlogin" style="display: none; "><div class="web_login"><form action="?act=reg" method="post" enctype="application/x-www-form-urlencoded" id="regUser"><ul class="reg_form" id="reg-ul"><div id="userCue" class="cue">快速注冊請注意格式</div><li><label for="account" class="input-tips2">用戶名：</label><div class="inputOuter2"><input type="text" id="account" name="account" maxlength="16" class="inputstyle2" placeholder="2-10個字符"/></div></li><li><label for="nickname" class="input-tips2">昵稱：</label><div class="inputOuter2"><input type="text" id="nickname" name="nickName" class="inputstyle2" placeholder="中文/英文"/></div></li><li><label for="password_order" class="input-tips2">密碼：</label><div class="inputOuter2"><input placeholder="不少于6位" type="password" id="password_order" name="passwordOrder" maxlength="16" class="inputstyle2"/></div></li><li><label for="password_new" class="input-tips2">確認密碼：</label><div class="inputOuter2"><input placeholder="請輸入相同的密碼" type="password" id="password_new" name="passwordNew" maxlength="16" class="inputstyle2"/></div></li><li><label for="phone" class="input-tips2">手機：</label><div class="inputOuter3"><input onClick="getVerifyCode()" value="獲取驗證碼" class="getcode text_input us_input getverify_sms " id="get_verification" type="button"><input placeholder="請輸入手機號" type="text" id="phone" name="phone" maxlength="11" class="inputstyle3"/></div></li><li><label for="yzm" class="input-tips2">驗證碼：</label><div class="inputOuter2"><input type="text" id="yzm" name="yzm" maxlength="30" class="inputstyle2" placeholder="手機驗證碼"/></div></li><li><div class="inputArea"><input type="submit" id="btnReg" style="margin-top:10px;margin-left:85px;" class="button_blue" value="免費注冊"/><a href="#" class="zcxy" target="_blank">注冊協議</a></div></li><div class="cl"></div></ul></form></div></div> </div><script>$(function () {//切換登錄$('#switch_qlogin').click(function () {$(this).parent().css('display', 'none');$('.roe-login').css('display', 'block');$('#qlogin').css('display', 'none');$('#web_qr_login').css('display', 'block');try {parent.layer.iframeAuto(parent.layer.getFrameIndex(window.name));} catch (e) {}});//切換注冊$('#switch_login').click(function () {$(this).parent().css('display', 'none');$('.roe-sign').css('display', 'block');$('#qlogin').css('display', 'block');$('#web_qr_login').css('display', 'none');try {parent.layer.iframeAuto(parent.layer.getFrameIndex(window.name));} catch (e) {}});if (getParam("a") == '0') {$('#switch_login').trigger('click');}});//根據參數名//urlparams 如果有a=0 則切換為注冊,默認為登錄頁面function getParam(pname) {var params = location.search.substr(1); // 獲取參數平且去掉？var ArrParam = params.split('&');if (ArrParam.length == 1) {//只有一個參數的情況return params.split('=')[1];}else {//多個參數參數的情況for (var i = 0; i < ArrParam.length; i++) {if (ArrParam[i].split('=')[0] == pname) {return ArrParam[i].split('=')[1];}}}}function checkusername(username) {username = $.trim(username);if (username == '') {layer.msg('用戶名不能為空！', {shift: 6});$("#username").focus();return false;}return true;}function checkpassword(pw) {pw = $.trim(pw);if (pw == '') {layer.msg('密碼不能為空！', {shift: 6});$("#password").focus();return false;}return true;}function validates() {if (!checkusername($("#username").val()))return false;if (!checkpassword($("#password").val()))return false;}$(document).ready(function () {//點擊[注冊]按鈕$('#btnReg').click(function () {//用戶名不能為空if ($.trim($('#account').val()) == "") {$('#u').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});$('#userCue').html("<font color='red'><b>×用戶名不能為空</b></font>");return false;}// 驗證昵稱if ($.trim($('#nickname').val()) == "") {$('#nickname').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});$('#userCue').html("<font color='red'><b>×昵稱不能為空</b></font>");return false;}if ($('#account').val().length < 2 || $('#account').val().length > 10) {$('#account').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});$('#userCue').html("<font color='red'><b>×用戶名位2-10字符</b></font>");return false;}$.ajax({type: "GET",url: '../ajax.php?act=regcheck',data: "username=" + $("#account").val() + '&temp=' + new Date(),dataType: 'html',success: function (result) {if (result != '1') {$('#u').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});if (result == '-1')$("#userCue").html("<font color='red'><b>×用戶名含關鍵字，不能使用！</b></font>");else if (result == '0')$("#userCue").html("<font color='red'><b>×用戶名被占用！</b></font>");return false;} else {$('#u').css({border: "1px solid #52B1E1",boxShadow: "none"});}}});var phone = /^1[0-9]{10}$/;if ($.trim($('#phone').val()) == "" || !phone.test($('#phone').val())) {$('#phone').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});$('#userCue').html("<font color='red'><b>×手機號格式不正確</b></font>");return false;} // var sqq = /^[1-9]{1}[0-9]{4,9}$/; // if (!sqq.test($('#qq').val()) || $('#qq').val().length < 5 || $('#qq').val().length > 12) { // $('#qq').focus().css({ // border: "1px solid red", // boxShadow: "0 0 2px red" // }); // $('#userCue').html("<font color='red'><b>×QQ號碼格式不正確</b></font>"); // return false; // } else { // $('#qq').css({ // border: "1px solid #D7D7D7", // boxShadow: "none" // }); // // }var msgonoff = 1;if (msgonoff == 1) {if ($.trim($('#yzm').val()) == "") {$('#yzm').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});$('#userCue').html("<font color='red'><b>×驗證碼不能為空</b></font>");return false;}}if ($('#password_order').val().length < 6) {$('#password_order').focus();$('#userCue').html("<font color='red'><b>×密碼不能小于" + 6 + "位</b></font>");return false;}if ($('#password_new').val() != $('#p').val()) {$('#password_new').focus();$('#userCue').html("<font color='red'><b>×兩次密碼不一致！</b></font>");return false;}$('#password_new').css({border: "1px solid #D7D7D7",boxShadow: "none"});$('#userCue').html("<font ><b>正在注冊中...</b></font>");$('#regUser').submit();})//獲取手機驗證碼function getVerifyCode() {var phone = $('#phone').val()var phoneValidation = /^1[0-9]{10}$/;if (!phoneValidation.test(phone)) {$('#phone').focus().css({border: "1px solid red",boxShadow: "0 0 2px red"});layer.msg('請正確輸入手機號碼！', {shift: 6});return false;}$.post("/apps/suiji_duanxin.php?action=call_yzm",{phone: phone},function (data) {if (data['status'] == 1) {layer.msg('手機驗證碼將以短信方式發送到您的手機，請注意接收！！', {shift: 6});verification_countdown--;u_class = '.getverify_sms';verification_settime(u_class);$(u_class).attr('disabled', true);} else {layer.msg('發送失敗！請正確填寫手機號碼！', {shift: 6});u_class = '.getverify_sms';verification_settime(u_class);}}, 'json');}//禁止60秒var verification_countdown = 60;var verification_timeID;var verification_timeID_array = new Array();function verification_settime(u_class) {if (verification_countdown == 0) {verification_countdown = 60;$(u_class).removeAttr('disabled');$(u_class).val('獲取驗證碼');for (i = 0; i < verification_timeID_array.length; i++) {clearTimeout(verification_timeID_array[i]);}verification_timeID_array = new Array();} else if (verification_countdown == 60) {} else {$(u_class).val(verification_countdown)verification_countdown--;verification_timeID = setTimeout(function () {verification_settime(u_class)}, 1000)verification_timeID_array.push(verification_timeID)}}}); </script> </body> </html>

總結

以上是生活随笔為你收集整理的前端代码整理-迷你登录页面的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：硬件nat关闭还是开启_vivo用户必看
下一篇：搜狗浏览器屏蔽广告插件_“云法庭”里“云