NetEase, beautiful man has a login effect _ PHP Tutorial

NetEase and beauty have a login effect. Let's complete the previously disassembled functions first! 1. The key to the transparent layer (Display and hide) is to set the following styles at the same time to make the mainstream browsers realistic and transparent. we need to complete the functions previously disassembled!
1. Transparent layer (Display and hide)
The key is to set the following styles at the same time to make the mainstream browsers realistic and transparent.

Filter = 'alpha (Opacity = 50 )';
Required opacity = '0. 5 ';
Opacity = '0. 5 ';

As many people may know, the effects of similar things on the transparent layer are called lightbox. Here I also name 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 ('P ');
Box. id = box. id | this. id;
With (box. style ){
Position = 'absolute ';
Left = '0 ';
Top = '0 ';
Width = '000000 ';
Height = '20180101 ';
ZIndex = '20140901 ';
Background = '# ccc ';
Filter = 'alpha (Opacity = 50 )';
Required opacity = '0. 5 ';
Opacity = '0. 5 ';
Display = 'none ';
}
Document. body. appendChild (box );
Return box;
},
Show: function (){
This. box. style. height = document.doc umentElement. scrollHeight + 'px ';
This. box. style. display = '';
},
Hide: function (){
This. box. style. display = 'none ';
}
}

2. Form submission (ajax or iframe)
Iframe is used on Thunder. here we will first talk about iframe
Iframe is much simpler. set the target attribute of form to the name of an iframe. Set the onload attribute of iframe. after the form is submitted, it performs corresponding processing.

If ajax is used, the code is also very simple. The js framework may be different in most scenarios. But most of them are similar. I believe you will know what it means at first glance.
Class I will not list it here. I just want to write how to use it.
This is actually the net class in the book ajax in action.

/* Many may say, why didn't encodeURIComponent be used to avoid garbled characters? You do not need to use encodeURIComponent here. you have called it in the class */
/**
* 'Login. php': login verification page [nonsense]
* Login. checkLogin: ajax callback function [nonsense]
* LoadXMLDoc parameters: the 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 hide, and cookie operations.
Since select cannot be blocked by p, let's take it out!

Var Select = {
Show: function (){
Var selects = document. getElementsByTagName ('select ');
For (var m = 0; m },
Hide: function (){
Var selects = document. getElementsByTagName ('select ');
For (var m = 0; m }
}

We also need to prepare a set of cookie functions.
The biggest advantage of the network: for some problems, you only need to know what to do, and someone has already done it for you.
I searched the forum and found
Http://www.phpchina.com/bbs/view... a = page = 1 & sid = 4jSn3r

Var Cookie =
{
Check: function (){
// Determine whether the cookie is enabled
Var cookieEnabled = (navigator. cookieEnabled )? True: false;
// If the browser is not ie4 + or ns6 +
If (typeof navigator. cookieEnabled = "undefined "&&! CookieEnabled ){
Document. cookie = "testcookie ";
CookieEnabled = (document. cookie = "testcookie ")? True: falsedocument. cookie = "";
}

// If not enabled
If (cookieEnabled ){
Return true;
} Else {
Return false;
}
},
Add: function (name, value, expireHours ){
Var cookieString = name + "=" + escape (value );
// Determine whether to set the Expiration Time
If (expireHours> 0 ){
Var date = new Date ();
Date. setTime (date. getTime + expireHours * 3600*1000 );
CookieString = cookieString + "; expire =" + date. toGMTString ();
}
Document. cookie = cookieString;
},
Get: function (name ){
Var strCookie = document. cookie;
Var arrCookie = strCookie. split (";");
For (var m = 0; m var arr = arrCookie [m]. split ("= ");
If (arr [0] = name ){
Return unescape (arr [1]);
}
}
Return false;
},
Del: function (name ){
Var date = new Date ();
Date. setTime (date. getTime ()-10000 );
Document. cookie = name + "=; expire =" + date. toGMTString ();
}

}

4. The previously mentioned callback function and two background pages
Finally, let's talk about the previously mentioned callback function Login. checkLogin. What do you need to do after logging on to Login. loginSuccess.

/* No cookie is supported here. it is detected during the login pop-up. if the cookie is not supported, the login window will not pop up. */
Var Login =
{
Statu: 0,
/* This is what needs to be done if the login is successful. It is usually to process the entire page before and after login. You can reload it */
LoginSuccess: function (){
Document. getElementById ('login _ result'). innerHTML = Cookie. get ('Username') + 'logged in ';
Alert ('login successful! ');
},
/* This is what should be done if the login fails. It is usually to process the entire page before and after login. You can reload it */
LoginOutSuccess: function (){
Document. getElementById ('login _ result'). innerHTML = Cookie. get ('Username') + 'just exited successfully ';
Alert ('logout successful! ');
},
CheckLogin: function (){
If (Login. statu = 1 & Cookie. get ('loginstatu') = 1 ){
New LoginDialog ('login _ box'). hide ();
Login. loginSuccess ();
} Else if (Login. statu = 2 & Cookie. get ('loginstatu') = 0 ){
Login. statu = 0;
Login. loginOutSuccess ();
} Else if (Login. statu = 1 ){
Alert ('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 will not elaborate on the background code. their respective systems have their own differences. I will paste the code for testing here and talk about 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 the same as that set in your front-end. otherwise, garbled characters may occur when two-byte characters appear.
* You can use setCookie to write the code in the cookie to the front-end.
* The 'loginstatu' that indicates successful login must be set to 1. the other one 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 ');
}?>

/* You don't need to talk about the verification code program! I used it for testing, so I just cut off the time for 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 entire process of LoginDialog class understanding:

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 on normally '); return}
Else if (Cookie. get ('loginstatu') = 1) {alert ('you have logged on! '); Return}
Login. statu = 1;
This. overDiv. show ();
Select. hide ();
Login. getVcode ();
This. dialog. style. display = '';
},
Hide: function (){
Login. statu = 0;
This. overDiv. hide ();
Select. show ()
This. dialog. style. display = 'none ';
}
}

Mainly look at show ()
Hide () is just a restore operation

// When the cookie is not supported, an error is prompted and the system exits.
If (! Cookie. check () {alert ('Your browser does not support cookies and cannot log on normally '); return}

// If the cookie. loginstatu value is 1, it indicates that you have logged on. You do not need to log on again.
Else if (Cookie. get ('loginstatu') = 1) {alert ('you have logged on! '); Return}

// Set Login. statu = 1; indicates that the current Login operation is in progress.
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 these steps, you can submit the form in iframe or ajax.
After the form is submitted:
If it is submitted in iframe format, the onload event of iframe will call Login. checkLogin (). when check is successful, it will call Login. loginSuccess () and Login. loginOutSuccess ()
Ajax uses Login. checkLogin as the callback function to activate Login.
Therefore, Login. loginSuccess () and Login. loginOutSuccess () determine what to do after successful Login. You can reload them.

Success! 1. The key to transparent layer (Display and hide) is to set the following styles at the same time to make the mainstream browsers realistic and transparent...