登陆页如下所示：
下面给大家展示下具体实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.11.1.min.js"></script> <title>网络医院登陆</title> <style type="text/css"> * { margin: 0px; padding: 0px; } html, body { height: 100%; width: 100%; overflow: hidden; font-family: "微软雅黑"; font-size: 16px; } .main-box { width: 100%; height: 100%; min-width: 960px; overflow: hidden; background: url(imges/bg.jpg) no-repeat center center; } .left-box, .right-box { width: 50%; height: 100%; float: left; } .left-box { width: 50%; height: 100%; background: url(imges/leftboxbg.jpg) no-repeat center center; z-index: 10; position: relative; } .right-box { width: 50%; height: 100%; position: relative; } .left-title { width: 300px; height: 236px; margin: 150px auto; } .left-title img { display: block; width: 300px; height: 186px; } .left-title p { width: 300px; height: 50px; line-height: 50px; color: white; font-size: 18px; text-align: center; } .loginavatar { width: 160px; height: 160px; background: url(imges/loginavatar.png) no-repeat; margin: 50px auto 50px; } ul li { list-style: none; display: block; } .right-title, .right-title-zhuce { width: 400px; height: 255px; /* border: 1px solid red; */ margin: 0px auto; } .login input { display: block; width: 350px; color: black; height: 40px; border: 1px solid #42BD56; margin: 10px auto 10px; } input::-webkit-input-placeholder { color: black; } input:-moz-placeholder { color: black; } input:-ms-input-placeholder { color: black; } input.username { text-indent: 50px; background: url(imges/bg-loginid.png) no-repeat 0 -7px; margin-top: 30px; } input.pwd { text-indent: 50px; background: url(imges/bg-loginpass.png) no-repeat 0 -7px; } input.sub { background: #2A8C70; border: none; color: white; border-radius: 5px; } .sub-ljzc, .sub-fsdx { width: 350px; height: 42px; margin: 10px auto 10px; /* border: 1px solid red;*/ } input.sub, input.msg { width: 160px; height: 40px; margin: 0px; float: left; } input.msg { background: none; text-align: center; } .sub-ljzc .ljzc, .sub-ljzc .ljdl, .sub-fsdx .hqyzm { float: right; display: block; width: 160px; height: 40px; background: white; line-height: 40px; text-align: center; color: #30A080; margin-right: 0px; border: 1px solid #30A080; border-radius: 5px; margin: 0; } </style> <script type="text/javascript"> $(function() { var pwd = /^[a-zA-z]\w{3,15}$/; var phone_num = /^1\d{10}$/; $("#ljzc").click(function() { $("#right-title").hide(); $("#right-title-zhuce").show(); }); $("#ljdl").click(function() { $("#right-title").show(); $("#right-title-zhuce").hide(); }); $("#sub").click(function() { if ($(".username").val() == "") { alert("请输入电话号码！"); return false; }; if (!phone_num.test($(".username").val().trim())) { alert("电话号码有误,请检查"); return false; }; if ($(".pwd").val() == "") { alert("请输入密码！"); return false; }; }); $(".hqyzm").click(function() { if ($("#username").val() == "") { alert("请输入注册电话号码！"); return false; } else if (!phone_num.test($("#username").val().trim())) { alert("注册电话号码有误,请重新填写！"); return false; } else { $('.hqyzm').css('color', 'red').prop("disabled", true); //发短消息不可再点击 var i = 10; var n = setInterval(function() { var j = i + 's'; $('.hqyzm').val(j); i--; if (i < -1) { clearInterval(n); $('.hqyzm').val('重新获取验证码!').prop("disabled", false); } }, 1000); } }) $("#ljzc-tj").click(function() { if ($("#username").val() == "") { alert("请输入注册电话号码！"); return false; }; if (!phone_num.test($("#username").val().trim())) { alert("注册电话号码有误,请重新填写！"); return false; }; if ($(".msg").val() == "") { alert("短息为空！"); return false; }; if ($("#pwd").val() == "") { alert("密码为空！"); return false; }; if (!pwd.test($("#pwd").val().trim())) { alert("密码有误，请重新填写，包含字母数字下划线，4-16位"); return false; }; }) }) </script> </head> <body> <div> <div> <div> <img src="https://www.jb51.net/imges/loginlogo.png" /> <p>医生工作站</p> </div> </div> <div> <div></div> <div> <form action="#" method="post " autocomplete="off"> <input type="text" placeholder="请输入账号 " /> <input type="password" placeholder="请输入密码 " /> <div> <input type="submit" value="登陆 " /> <a>立即注册</a> </div> </form> </div> <div ;> <form action="#" method="post" autocomplete="off"> <input type="text" placeholder="请输入注册账号" /> <div> <input type="text" /> <input type="button" value="获取验证码 "> </div> <input type="password" placeholder="请输入注册密码" /> <div> <input type="submit" value="立即注册" /> <a>立即登录</a> </div> </form> </div> </div> </div> </body> </html>
