NetEase, beauty has about login effects _php Tutorial

Let's finish the function of the above disassembly!
1. Transparent layer (show and hide)
The key is to set the following styles at the same time, in order to make the mainstream browser reality transparent effect.

Filter= ' Alpha (opacity=50) ';
mozopacity = ' 0.5 ';
opacity= ' 0.5 ';

Many people may know that the effect of this kind of reality on the transparent layer, multi-source as a result called Lightbox. Here I also named:

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% ';
height= ' 100% ';
zindex= ' 1000 ';
Background= ' #ccc ';
Filter= ' Alpha (opacity=50) ';
mozopacity = ' 0.5 ';
opacity= ' 0.5 ';
Display= ' None ';
}
Document.body.appendChild (box);
return 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)
Thunder on is the IFRAME that we use here first say IFRAME
The IFRAME is much simpler, and the target property of the form is set to the name of an IFRAME. Set the OnLoad property of the IFRAME so that he performs the appropriate processing after the form submission is complete.

If you use Ajax, the code is simple. Maybe everyone uses a different JS frame. But most of them are very much the same, and I'm sure you'll know what they mean at a glance.
Class I will not be listed here, I only write about how to use it.
This is actually the net class in the Ajax in action book.

/* Many people may say, why not use encodeURIComponent to avoid garbled characters? There is no need for encodeuricomponent to be used here.
/**
* ' login.php ': Login Verification page [nonsense]
* Login.checkLogin:ajax callback function [nonsense]
* Loadxmldoc parameters, 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. Display and hide of select, and cookie manipulation.
Now that select can't be blocked by Div, kill him!

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
}
}

And a set of cookie functions to prepare.
The biggest advantage of the network: for some problems, you just need to know what to do, as to how specifically to do already have someone to help you do it.
Below I casually search in the forum, found a
Http://www.phpchina.com/bbs/view ... a=page=1&sid=4jsn3r

var cookie=
{
Check:function () {
Determine if a cookie is turned on
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 it is not turned on
if (cookieenabled) {
return true;
}else{
return false;
}
},
Add:function (name,value,expirehours) {
var cookiestring=name+ "=" +escape (value);
Determine if the expiration time is set
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 callback function mentioned earlier and the two pages in the background
Finally, say the callback function Login.checklogin mentioned earlier. After landing what you need to do, write in the login.loginsuccess on the line, and finally in order to facilitate the use of a slight change.

/* There is no check to see if cookies are supported and are detected when login pops up. If cookies are not supported, the login window will not bounce. */
var login=
{
statu:0,
/* This is where the success of the landing, need to do the processing. Usually, the entire page before and after the landing of different places to deal with. You can reload */
Loginsuccess:function () {
document.getElementById (' Login_result '). Innerhtml=cookie.get (' username ') + ' already landed ';
Alert (' Landing succeeded! ');
},
/* This is where the landing fails and needs to be dealt with. Usually, the entire page before and after the landing of different places to deal with. You can reload */
Loginoutsuccess:function () {
document.getElementById (' Login_result '). Innerhtml=cookie.get (' username ') + ' just successfully exited ';
Alert (' Exit 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 (' 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 ';
}
}

Backstage code I will not elaborate, the respective systems have their own differences. I'm going to post the code for the test and say what these files do, and you just have to make sure that your page has these effects.

/**
* The character encoding format set in the header should be consistent with your foreground, otherwise there will be garbled characters when the double-byte character appears.
* Others can be written in a cookie in a setcookie way and uploaded to the front desk.
* The sign of the successful ' Loginstatu ' must be set to 1, the other depends on your landing is how to deal with
*/
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 ');
}?>

/* The CAPTCHA program is needless to say! I'm here for testing, so I just cut a time to do 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, $BG);
Imagestring ($im, 5, 0, 0, $_session[' vcode '), $textcolor);
Header ("Content-type:image/jpeg");
Imagejpeg ($im);
?>

Finally look at the whole process of logindialog comprehension:

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, cannot log in properly '); return}
else if (cookie.get (' Loginstatu ') ==1) {alert (' You've landed! '); 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 ';
}
}

The main is to see Show ()
Hide () is just a restore operation

Prompt for errors when cookies are not supported and exit
if (! Cookie.check ()) {alert (' Your browser does not support cookies, cannot log in properly '); return}

When a cookie is supported and the value of Cookie.loginstatu is 1 o'clock, the description is already logged in. You don't have to repeat the landing.
else if (cookie.get (' Loginstatu ') ==1) {alert (' You've landed! '); return}

Set login.statu=1; indicates that a login operation is currently in progress
Login.statu=1;

Transparent Background layer Display
This.overDiv.show ();

Hide Select
Select.hide ();

Refresh Verification Code
Login.getvcode ();

Show Login Window
This.dialog.style.display= ";
After completing these steps, you will be divided into IFrame or Ajax two ways to submit the form.
And after submitting the form:
If it is submitted as an IFRAME, the onload event of the IFRAME calls Login.checklogin (), and when the check succeeds, he calls Login.loginsuccess () and Login.loginoutsuccess ( )
Ajax, in turn, activates Login.checklogin as a callback function.
Therefore, the landing success after the specific do what by Login.loginsuccess () and login.loginoutsuccess () decision. When you use them, reload them.

http://www.bkjia.com/PHPjc/445128.html www.bkjia.com true http://www.bkjia.com/PHPjc/445128.html techarticle Let's finish the function of the above disassembly! 1. Transparent layer (show and hide) The key is to set the following several styles at the same time, in order to make the mainstream browser is realistic transparent effect ...

