之前练手随便写的百度注册页面。可以和后台进行交互。并且实现登陆,注册功能。
附源码
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>注册百度账号</title>
<script src="baidu.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="百度注册.css" />
</head>
<body>
<div class="top">
<img src="baidu.gif" />
<div class="line"></div>
<span>注册百度帐号</span>
<div class="a1">
<a href="javascript:;" class="show_btn fr" onclick="div_show('filter_box')">登陆</a>
</div>
<h5>我已注册,现在就</h5>
<div class="bottom"></div>
</div>
<br />
<form action="http://192.168.8.221/ajax_api/user.php?act=regist" method="post">
<input type="submit" value="" />
<div class="form">
<div class="a1">用户名</div>
<input type="text" placeholder="请设置用户名" id="jiaodian" onfocus="check_gain(this)" onkeyup="check_gaiban(this)" onblur="check_account(this)" />
<br />
<div class="font" id="font">设置后不可更改<br>中英文均可最长14个英文或者七个汉字</div>
<div class="font" id="font_tips" style="display: block;"></div>
<div class="a1">手机号</div>
<input type="tel" placeholder="可用于登陆和找回密码" id="jiaodian1" onblur="check_mobile(this)" /><br />
<div class="font1" id="result_tips">请输入中国大陆手机号,其他用户不可见</div>
<div class="a1">密码</div>
<input placeholder="请设置登陆密码" id="jiaodian2" type="password" /><br />
<div class="a1" onclick="cc(this.parentNode.querySelector('img'))">验证码</div>
<!--图片验证码-->
<!--图片验证码-->
<!--图片验证码-->
<!--图片验证码-->
<div class="a3" id="only">
<img src="http://192.168.8.221/TP5cms/public/index.php/captcha.html" id="img_1" style="width: 160px; height: 48px;" onclick="cc(this)" />
</div>
<script type="text/javascript">
function cc(this_obj) {
var img_src = this_obj.src;
if(img_src.indexOf('?') > -1) {
var img_1 = img_src.split('?')
img_src = img_1[0] + '?random=' + Math.random();
} else {
img_src = img_src + '?random' + Math.random();
}
this_obj.src = img_src;
}
//
</script>
<!--图片验证码-->
<!--图片验证码-->
<!--图片验证码-->
<!--图片验证码-->
<input placeholder="请输入验证码" class="a2" /><br />
<a href=""></a>
<div id="jiao">
</div>
<div id="kuang">
<div class="font3">
</div>
<span class="font2">
长度为8~14个字符
</span><br>
<div class="font3">
</div>
<span class="font2">
支持数字,大小写字母和标点符号
</span><br>
<div class="font3">
</div>
<span class="font2">
不允许有空格
</span>
</div>
<input type="checkbox" class="a4" />
<span>阅读并接受
<a href="https://passport.baidu.com/static/passpc-account/html/protocal.html" target="_blank">《百度用户协议》</a>
《百度用户协议》及
<a href="https://www.baidu.com/" target="_blank">《百度隐私权保护声明》</a>
</span>
<input type="button" name="" id="" value="注册" class="a10" onclick="aa()" />
<!-- <div class="a10" onclick="aa()">注册</div> -->
</form>
<div class="right">
<img src="phone.png" />
<div class="a20">手机快速注册</div>
<br />
<div class="line-1"></div>
<br />
<div class="a22">请使用中国大陆手机号,编辑短信:</div>
<div class="a23">8-14位字符(支持数字/字母/符号)</div>
<div class="a22">作为登录密码,发送至:</div>
<div class="a23">1069 0691 036590</div>
<div class="a22">即可注册成功,手机号即为登录帐号。
<br /> 快速注册即视为您同意
<a href="https://passport.baidu.com/static/passpc-account/html/protocal.html" target="_blank">百度用户协议</a>和
<a href="https://www.baidu.com/duty/yinsiquan.html" target="_blank">百度隐私权保护声明</a>
</div>
<img src="upreg.png" class="img-1">
<div class="a100">请使用手机百度进行扫码</div>
</div>
</div>
<script type="text/javascript">
function check_gain(this_obj) {
var aa = this_obj.value;
if(aa != "") {
document.getElementsByClassName("font")[0].style.display = "none";
} else {
document.getElementsByClassName("font")[0].style.display = "inline-block";
}
document.getElementsByClassName("font")[0].style.display = "inline-block";
document.getElementsByClassName("font")[1].style.display = "none";
};
function check_gaiban(this_obj) {
document.getElementsByClassName("font")[0].style.display = "block";
console.log(this_obj.value);
};
function check_account(this_obj) {
document.getElementsByClassName("font")[0].style.display = "none"
var account = this_obj.value; //从html中获取输入的手机号码
console.log(account);
var xhr = new XMLHttpRequest(); //创建xhr对象
var ajax_url = "http://192.168.8.221/ajax_api/user.php?act=check_account";
xhr.open("POST", ajax_url, true); //打开地址,并和后端建立请求
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //照搬
var data = 'account=' + account; //组成要传送给后端的参数数据
xhr.send(data); //发送数据
var msg = "请求未初始化!";
var color = "red";
console.log(3)
xhr.onreadystatechange = function() { //监测请求的状态
switch(xhr.readyState) {
case 0:
msg = "请求未初始化!";
break;
case 1:
msg = "服务器连接已建立!";
break;
case 2:
msg = "请求已接收!";
break;
case 3:
msg = "请求处理中!";
break;
case 4:
msg = "请求已完成,且响应已就绪!";
if(xhr.status == 200) { //如果xhr对象的状态status等于200,就表示后端返回结果,并且前端已收到
//xhr对象的属性responseText是由后端返回的结果,是字符串类型
var result = xhr.responseText;
console.log(result);
//通过JSON对象的方法parse()把json字符转换成json对象
var data = JSON.parse(result);
//console.log(data);
if(data.code == 1) {
color = "green";
} else {
color = "red";
}
msg = data.msg; //对象的属性方式访问
} else {
msg = "请求已完成,但找不到后端页面!";
}
console.log(msg);
break;
default:
break;
}
document.getElementById("font_tips").innerHTML = msg;
document.getElementById("font_tips").style.color = color;
document.getElementsByClassName("font")[1].style.display = "block";
}
};
function check_mobile(this_obj) {
var mobile = this_obj.value; //从html中获取输入的手机号码
console.log(15)
var xhr = new XMLHttpRequest(); //创建xhr对象
var ajax_url = "http://192.168.8.221/ajax_api/user.php?act=check_mobile"; //规定要请求后端的网页地址
xhr.open("POST", ajax_url, true); //打开地址,并和后端建立请求
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //照搬
var data = 'mobile=' + mobile; //组成要传送给后端的参数数据
xhr.send(data); //发送数据
var msg = "请求未初始化!";
xhr.onreadystatechange = function() { //监测请求的状态
switch(xhr.readyState) {
case 0:
msg = "请求未初始化!";
document.getElementById("result_tips").innerHTML = msg;
break;
case 1:
msg = "服务器连接已建立!";
document.getElementById("result_tips").innerHTML = msg;
break;
case 2:
msg = "请求已接收!";
document.getElementById("result_tips").innerHTML = msg;
break;
case 3:
msg = "请求处理中!";
document.getElementById("result_tips").innerHTML = msg;
break;
case 4:
msg = "请求已完成,且响应已就绪!";
document.getElementById("result_tips").innerHTML = msg;
if(xhr.status == 200) { //如果xhr对象的状态status等于200,就表示后端返回结果,并且前端已收到
//xhr对象的属性responseText是由后端返回的结果,是字符串类型
var result = xhr.responseText;
console.log(result);
//通过JSON对象的方法parse()把json字符转换成json对象
var data = JSON.parse(result);
console.log(data);
msg = data.msg; //对象的属性方式访问
} else {
msg = "请求已完成,但找不到后端页面!";
};
console.log(msg);
document.getElementById("result_tips").innerHTML = msg;
break;
default:
break;
}
// if(data.code == 1) {
// document.getElementById('result_tips').style.color = 'green'
// } else {
// document.getElementById('result_tips').style.color = 'red'
// }
}
}
</script>
<!-- 弹出层 -->
<div class="filter-box" id="filter_box">
<div class="filter-bg"></div>
<div class="filter-body">
<a href="javascript:;" class="close_btn fr" onclick="div_hide('filter_box')">X</a>
<div id="box_1">
<img src="baidu.gif" class="img_2">
<div class="filter-title">
用户名密码登陆
</div>
</div>
<input type="text" class="inn" id="texy_1" placeholder="手机/邮箱/用户名" />
<br>
<input type="password" class="inn" id="inn" placeholder="密码" />
<input type="checkbox" name="" id="checkbox" value="" />
<span>下次自动登录</span>
<div id="denglu" onclick="aa()">
<a href="">登录</a>
</div>
<div id="tips">
-----
</div>
<div id="pass">
<a href="https://passport.baidu.com/?getpassindex&tt=1557191419227&gid=25DB113-EA9E-4355-B919-5A75E5232E38&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2F" target="_blank">忘记密码?</a>
</div>
<div id="kuang_1">
<span id="bo_1"><a href="">扫码登陆</a></span>
<div class="line_1">
</div>
<div class="bo_2">
<a href="https://graph.qq.com/oauth2.0/show?which=Login&display=pc&client_id=100312028&response_type=code&redirect_uri=https%3A%2F%2Fpassport.baidu.com%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3Dd10f027f4c006965d2fc69ae83658a531914cc4068c66dd776&state=1557231595&display=page&scope=get_user_info%2Cadd_share%2Cget_other_info%2Cget_fanslist%2Cget_idollist%2Cadd_idol%2Cget_simple_userinfo&traceid=" target="_blank"></a>
</div>
<div class="bo_3">
<a href="https://api.weibo.com/oauth2/authorize?client_id=2512457640&response_type=code&redirect_uri=https%3A%2F%2Fpassport.baidu.com%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3D7a0baa1a14e2cba465ff1623a2fff51ec23dd15c9029520d04&forcelogin=1&state=1557231754&display=page&traceid=" target="_blank"></a>
</div>
<div class="bo_4">
<a href="https://open.weixin.qq.com/connect/qrconnect?appid=wx85f17c29f3e648bf&response_type=code&scope=snsapi_login&redirect_uri=https%3A%2F%2Fpassport.baidu.com%2Fphoenix%2Faccount%2Fafterauth%3Fmkey%3Def87eba5fc1928de83319f6f5f8b7831c22d8edba8137240ec%26appid%3Dwx85f17c29f3e648bf%26traceid%3D&state=1557231757&display=page&traceid=" target="_blank"></a>
</div>
<div class="bo_5">
<a href="https://passport.baidu.com/v2/?reg&tt=1557190890370&overseas=undefined&gid=2D87396-367C-47FE-B2C5-4DB3FC0F236F&tpl=mn&u=https%3A%2F%2Fwww.baidu.com%2F" target="_blank">立即注册</a>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function div_show(divID) {
document.getElementById(divID).style.display = "block";
}
function div_hide(divID) {
document.getElementById(divID).style.display = "none";
}
</script>
</body>
</html>
css
* {
margin: 0;
padding: 0;
}
.top {
float: left;
width: 1100px;
margin: auto;
padding: 20px;
margin-left: 15%;
}
input:focus{
border: 1px solid #00008B;
}
.top img {
float: left;
width: 150px;
height: 48px;
margin: 10px;
}
.line {
float: left;
width: 1px;
height: 27px;
border-left: 1px solid rgba(0, 0, 0, 0.3);
margin: 10px;
margin-top: 30px;
}
.top span {
margin-top: 30px;
float: left;
font-size: 20px;
color: rgba(0, 0, 0, 0.6);
}
.top h5 {
margin-top: 30px;
font-weight: 300;
float: right;
margin-right: 10px;
}
.top .a1 {
margin-top: 18px;
background-color: rgba(0, 0, 0, 0.1);
line-height: 15px;
float: right;
width: 50px;
height: 28px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 5px;
}
.a1 a {
position: absolute;
color: black;
text-decoration: none;
font-size: 14px;
font-weight: 700;
right: 233px;
top: 37px;
}
.top .bottom {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
margin-top: 80px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
}
.form {
display: inline-block;
margin-top: 50px;
margin-left: 287px;
float: left;
}
.form .a1 {
margin: 20px;
display: inline-block;
width: 50px;
text-align: right;
color: rgba(0, 0, 0, 0.6);
font-weight: 900;
font-size: 14px;
}
.form input {
width: 349px;
height: 42px;
}
.form .a2 {
height: 42px;
width: 182px;
}
.form .a3 {
top: 356px;
left: 574px;
position: absolute;
border: 1px solid rgba(0, 0, 0, 0.2);
width: 159px;
height: 45px;
color: rgba(0, 0, 0, 0.7);
text-align: center;
line-height: 45px;
}
.form .a3:hover {
background-color: #f0f0f5;
transition: all 0.5s linear;
}
.form .a4 {
width: 13px;
height: 13px;
margin: 10px;
margin-left: 86px;
}
.form span {
font-size: 10px;
}
.form span a {
color: blue;
text-decoration: none;
}
.form span a:hover {
text-decoration: underline;
}
.form .a10 {
width: 352px;
height: 49px;
background-color: #3f89ec;
position: absolute;
margin: 10px;
margin-left: 86px;
color: white;
font-weight: 800;
text-align: center;
line-height: 49px;
}
.form .font {
position: absolute;
left: 745px;
top: 185px;
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
display: none;
}
.form .font1 {
position: absolute;
left: 745px;
top: 255px;
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
display: none;
}
.form #kuang {
/* background-color: #f0f0f5; */
width: 226px;
height: 70px;
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: 1px 4px 2px rgba(0, 0, 0, 0.1);
position: absolute;
left: 745px;
top: 285px;
display: none;
}
.form .font3 {
display: inline-block;
width: 4px;
height: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 4px;
margin-left: 5px;
}
.form .font2 {
display: inline-block;
color: rgba(0, 0, 0, 0.5);
font-size: 10px;
}
.right {
text-align: center;
position: absolute;
width: 281px;
border: 1px solid #d1eeff;
background-color: #f5fbff;
height: 455px;
left: 1020px;
top: 136px;
}
.right img {
float: left;
margin: 10px;
}
.right .a20 {
font-size: 16px;
float: left;
font-weight: 900;
margin: 20px;
margin-left: 0px;
}
.right .line-1 {
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
width: 254px;
margin-top: 25px;
margin-left: 10px;
}
.right .a22 {
text-align: left;
padding: 0px 5px;
font-size: 12px;
color: rgba(0, 0, 0, 0.4);
}
.right div:nth-of-type(5) {
margin-top: 10px;
}
.right .a23 {
text-align: left;
padding: 5px;
font-size: 14px;
color: chocolate;
font-weight: 800;
}
.right div:nth-of-type(7) {
margin-top: 10px;
}
.right .img-1 {
width: 159px;
height: 159px;
position: absolute;
left: 40px;
top: 238px;
}
.right .a100 {
font-size: 12px;
position: absolute;
bottom: 20px;
left: 65px;
}
/* 弹出层 */
* {
margin: 0;
padding: 0;
outline: none;
}
body {
color: #666666;
background-color: #FFFFFF;
}
a {
text-decoration: none;
}
.fr {
float: right;
}
.filter-box {
display: none;
position: fixed;
z-index: auto;
/*width: 100%;
height: 100%;*/
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.filter-bg {
position: absolute;
z-index: auto;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.5;
}
.filter-body {
margin: 10% auto;
position: relative;
z-index: auto;
width: 360px;
min-height: 100px;
color: #666666;
background-color: #FFFFFF;
height: 400px;
}
.close_btn {
margin-top: 10px;
margin-right: 20px;
color: rgba(0,0,0,0.4);
}
.show_btn {
margin-top: 10px;
margin-right: 20px;
}
#box_1{
position: relative;
width: 330px;
height: 100px;
}
.img_2{
position: absolute;
margin: 20px;
width: 95px;
height: 34px;
display: inline-block;
}
.filter-title{
position: absolute;
display: inline-block;
color: #000000;
left: 135px;
top: 35px;
}
.inn{
height: 45px;
width: 300px;
margin: 0px 25px 10px 25px;
box-sizing: border-box;
}
.inn:focus{
border:1px solid blue;
}
#checkbox{
margin-left: 20px;
}
span{
font-size: 14px;
}
#denglu{
margin: 8px;
text-align: center;
font-weight: 900;
color: white;
width: 320px;
height: 40px;
background-color: #3f89ec;
line-height: 40px;
border-radius: 5px;
margin-left: 20px;
}
#denglu a{
color: white;
}
#pass a{
font-size: 12px;
text-decoration: none;
color: rgb(46, 130, 255);
margin-left: 20px;
}
#pass a:hover{
color: red;
}
#kuang_1{
width: 360px;
height: 60px;
background-color: #f0f6ff;
position: relative;
margin-top: 21px;
}
#bo_1 a{
position: absolute;
color: rgb(46, 130, 255);
left: 20px;
top: 20px;
}
.line_1{
position: absolute;
border-left: 1px solid rgb(46, 130, 255);
width: 1px;
height: 10px;
left: 105px;
top: 25px;
}
.bo_2 a{
position: absolute;
left: 115px;
top: 25px;
background-position: -6px -55px;
width: 20px;
height: 18px;
background-image: url(loginv4.png);
}
.bo_3 a{
position: absolute;
display: inline-block;
left: 140px;
top: 25px;
background-position: -55px -33px;
width: 20px;
height: 18px;
background-image: url(loginv4.png);
}
.bo_4 a{
position: absolute;
display: inline-block;
left: 165px;
top: 25px;
background-position: -30px -30px;
width: 20px;
height: 18px;
background-image: url(loginv4.png);
}
.bo_5 a{
position: absolute;
right: 20px;
color: rgb(46, 130, 255);
text-decoration: none;
font-size: 14px;
top: 20px;
}
js
window.onload=function (){
var box_obj=document.getElementById('jiaodian')
box_obj.onfocus = function(){
document.getElementsByClassName("font")[0].style.display = "inline-block"
}
// box_obj.onblur = function(){
// document.getElementsByClassName("font")[0].style.display = "none"
// }
var box_obj=document.getElementById('jiaodian1')
box_obj.onfocus = function(){
document.getElementsByClassName("font1")[0].style.display = "inline-block"
}
// box_obj.onblur = function(){
// document.getElementsByClassName("font1")[0].style.display = "none"
// }
var box_obj=document.getElementById('jiaodian2')
box_obj.onfocus = function(){
document.getElementById('kuang').style.display = "inline-block"
}
box_obj.onblur = function(){
document.getElementById('kuang').style.display = "none"
}
};
function aa(){
var inn=document.getElementById("texy_1").value;
console.log(inn);
var pass=document.getElementById("inn").value;
console.log(pass);
var idzhi='http://192.168.8.221/ajax_api/user.php?act=login';
var xhr=new XMLHttpRequest();
xhr.open('post',idzhi,true);
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded"); //照搬
var data = '&username=' + inn+'&password='+pass; //组成要传送给后端的参数数据
xhr.send(data); //发送数据
var msg = "请求未初始化!";
var color = "red";
xhr.onreadystatechange = function() { //监测请求的状态
switch(xhr.readyState) {
case 0:
msg = "请求未初始化!";
break;
case 1:
msg = "服务器连接已建立!";
break;
case 2:
msg = "请求已接收!";
break;
case 3:
msg = "请求处理中!";
break;
case 4:
msg = "请求已完成,且响应已就绪!";
if(xhr.status == 200) { //如果xhr对象的状态status等于200,就表示后端返回结果,并且前端已收到
//xhr对象的属性responseText是由后端返回的结果,是字符串类型
var result = xhr.responseText;
console.log(result);
//通过JSON对象的方法parse()把json字符转换成json对象
var data = JSON.parse(result);
console.log(data);
if(data.code == 1) {
color = "green";
} else {
color = "red";
}
msg = data.msg; //对象的属性方式访问
} else {
msg = "请求已完成,但找不到后端页面!";
}
console.log(msg);
break;
default:
break;
}
document.getElementById("tips").innerHTML = msg;
document.getElementById("tips").style.color = color;
}
}