NetEase, beauty has an appointment login effect_PHP tutorial

Let’s complete the functions disassembled above first!
1. Transparent layer (show and hide)
The key is to set the following styles at the same time to achieve the transparent effect on mainstream browsers.

filter= 'Alpha(Opacity=50)';
MozOpacity ='0.5';
opacity='0.5';

Many people may know, Similar to this effect of realistic things on a transparent layer, there is an effect called lightbox. Here I also named it like this:

function Lightbox(id)
{
this.box = this.createBox();
this.id = id||'lightbox_id';
}
Lightbox.prototype=
{
createBox:function(){
var box = document.getElementById(this.id)||document.createElement('div');
box.id = box.id||this.id;
with(box.style){
position='absolute';
left='0';
                   top='0';
                                                                               width='100%'; background='#ccc';
) '; 🎜>           }
                document.body.appendChild(box); box;
},
show:function(){
this.box.style.height= document.documentElement.scrollHeight+'px';
this.box.style.display = '';
},
hide:function(){
this.box.style.display = 'none';
}
}


2. Form submission (ajax or iframe)
Xunlei uses iframe. Let’s talk about iframe first.
iframe is much simpler. Just set the target attribute of the form to the name of an iframe. Set the onload attribute of the iframe, then it will perform corresponding processing after the form submission is completed.

I won’t list the classes here, I will just write how to use them.

This is actually the net class in the book Ajax in Action.

/*Many people may say, why don’t you use encodeURIComponent to avoid garbled characters? There is no need to use encodeURIComponent here, it has been called in the class*/
/**
* 'login.php': Login verification page [nonsense]
* Login.checkLogin: ajax callback function [nonsense]
* Parameters of loadXMLDoc, data to be passed in the form [nonsense]
*/

new Ajax('login.php',Login.checkLogin).loadXMLDoc({
username:document.getElementById('username').value,
password:document.getElementById('password').value,
       vcode:document.getElementById('vcode').value
});

3. Select display and hiding, as well as cookie operations.
Since the select cannot be blocked by div, let’s kill him!

var Select={
show:function(){
var selects=document.getElementsByTagName('select');
for(var m=0;m  }
}


Also prepare a set of cookie functions
The biggest benefit of the Internet: For certain problems, you only need to know what to do, and someone has already done it for you.

I just searched the forum and found one

http://www.phpchina.com/bbs/view ... a=page=1&sid=4jSn3r

var Cookie=
{
check:function(){
//If The browser is not ie4+ or ns6+ .cookie=="testcookie" )? true : falsedocument.cookie="";
                                                                                          return true;                                 false;
}
},
add:function(name,value,expireHours){
var cookieString=name+"="+escape(value); //Determine whether the setting has expired Time If (Expirehouse & GT; 0) {
VAR DATE = New Date ();
Date.settime (date.gettime+Expirehouse*3600*1000);
COOKIESTRING = cookies raing+"; expire = "+date.toGMTString();
                                                                                                                         var strCookie=document.cookie;
var arrCookie=strCookie.split("; ");
for(var m=0;m var arr=arrCookie[m].split("=");
                                                                                                                                                                          }
                                                                                                                                                                                                                                                                        been been been returned false; name){
var date=new Date();
date.setTime(date.getTime()-10000);
document.cookie=name+"=; expire="+date.toGMTString();
}

}

4. The callback function mentioned earlier and the two background pages
Finally, let’s talk about the callback function Login.checkLogin mentioned earlier. Just write what you need to do after logging in in Login.loginSuccess. Finally, it was slightly changed for convenience.

/* There is no check whether cookies are supported here. It is checked when the login pops up. If cookies are not supported, the login window will not pop up. */
var Login=
{
status: 0,
/*This is what needs to be done if the login is successful. Usually, the different parts of the entire page before and after login are processed. You can reload it*/
loginSuccess:function(){
document.getElementById('login_result').innerHTML=Cookie.get('username')+'Already logged in';
alert(' Login successful! ');
},
 /*This is what needs to be done if the login fails. Usually, the different parts of the entire page before and after login are processed. You can reload it*/
loginOutSuccess:function(){
document.getElementById('login_result').innerHTML=Cookie.get('username')+'Just successfully exited';
alert( 'Exit successfully! ');
},
checkLogin:function(){
                                                                     LoginDialog( 'login_box').hide();
                                                                                                                                 Login.statu= 0;
Login.loginOutSuccess();
}else if(Login.statu==1){
alert('Please check your username, password and verification code ! ');
}
},
getVcode:function(){
document.getElementById('verify_code').src='vcode.php?cachetime='+new Date().getTime();
},
loginOut:function(){
Login.statu=2;
document.getElementById('login_submit_iframe').contentWindow.location='loginout.php';
}
}


I won’t go into details about the background code, each system has its own differences. I will post the test code here and explain what these files should do. You just need to ensure that your page has these functions.

/**
* The character encoding format set in the header must be consistent with your front desk, otherwise garbled characters will appear when double-byte characters appear.
* Others can be written and passed in the cookie using setCookie. Go to the front desk.
* 'loginStatu', which indicates successful login, must be set to 1, and the rest depends on how your login is handled
*/
header('content-type:text/html; charset=utf-8');
session_start();
$username = 'phpchina';
$password = 'phpchina';
if($username==$_POST['username']&&$password==$_POST['password']&&$ _SESSION['vcode']==$_POST['vcode']){
setcookie('username','phpchina');
setcookie('loginStatu','1');
}? >

/*Needless to say the verification code procedure! I am here for testing, so I just cut a time to make the verification code*/
session_start();
$_SESSION['vcode'] = substr(time(), -4);
$im = imagecreatetruecolor(40, 20);
$bg = imagecolorallocate($im, 225, 225, 225);
$textcolor = imagecolorallocate($im, 0, 0, 0);
imagefill($im,1,1,$bg);
imagestring($im, 5, 0, 0, $_SESSION['vcode'], $textcolor);
header( "Content-type:image/jpeg");
imagejpeg($im);
?>

Finally, let’s take a look at the whole process of understanding the LoginDialog class:

function LoginDialog( formid)
{
this.dialog = document.getElementById(formid||'login_box');
this.overDiv = this.overDiv ||new Lightbox();
}
LoginDialog .prototype =
{
show:function(){
if(!Cookie.check()){alert('Your browser does not support cookies and cannot log in normally'); return}
                                                               ‐                                                                                                                         Login.statu = 1                        { alert ( ' You have logged in! '); return}                                                                     🎜> Select.hide();
Login.getVcode();
this.dialog.style.display='';
},
hide:function(){
Login. status=0;
this.overDiv.hide();
Select.show()
this.dialog.style.display='none';
}
}


Mainly look at show()

hide() is just a restore operation

//When cookies are not supported, an error is prompted and exits
if(!Cookie.check() ){alert('Your browser does not support cookies and cannot log in normally'); return}

//When cookies are supported and the value of cookie.loginstatu is 1, it means you have logged in. No need to log in again.
else if(Cookie.get('loginStatu')==1){alert('You have logged in!');return}

//Set Login.statu=1; means currently doing Login operation
Login.statu=1;

//Transparent background layer display
this.overDiv.show();

//Hide select
Select.hide ();

//Refresh the verification code
Login.getVcode();

//Display the login window
this.dialog.style.display='';

After completing the above steps, there are two ways to submit the form: iframe or ajax.

After submitting the form:
If it is submitted in iframe form, the onload event of the iframe will call Login.checkLogin(). When the check is successful, it will call Login.loginSuccess() and Login.loginOutSuccess() accordingly.
Ajax activates Login.checkLogin as a callback function.
Therefore, what to do after successful login is determined by Login.loginSuccess() and Login.loginOutSuccess(). When using, just reload them.

http://www.bkjia.com/PHPjc/445128.html

www.bkjia.comtruehttp: //www.bkjia.com/PHPjc/445128.htmlTechArticleLet’s complete the functions disassembled above first! 1. Transparent layer (show and hide) The key is to set the following styles at the same time to achieve the transparent effect on mainstream browsers...