网易,佳人有约登录效果

作者: php100
时间: 2013-09-05
分类: php框架

我们先把上面拆解出来的功能完成！
1。透明层（显示与隐藏）
关键是要同时设置下面这几个样式，才能使主流浏览器上都现实透明的效果。

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

可能很多人都知道，类似这种在透明层上现实东西的效果，多源至于一个称为lightbox的效果。这里我也这样命名：

2。表单提交（ajax或iframe）
迅雷上的是用的iframe，我们这里先说iframe
iframe就简单多了，form的target属性设置为某个iframe的name就可以了。设置iframe的onload属性，那么当表单提交完成以后他就会执行相应处理。

<form id="login_form" action="login.php" target="login_submit_iframe" method="post">

<iframe name="login_submit_iframe" id="login_submit_iframe" style="display:none;" width="0" height="0" ></iframe>

如果用ajax的话，代码也很简单。可能大家用的js框架不一样。但绝大多数都大同小异，我相信大家一看就知道是什么意思。
类我就不在这列举了，我只写一下怎么用它。
这其实就是ajax in action这本书上的那个net类。

/*很多人可能会说,为什么没用encodeURIComponent避免乱码?这里不需要使用encodeURIComponent了，在类里面调用过了*/
/**
* login.php:登陆验证页[废话]
* Login.checkLogin:ajax回调函数[废话]
* loadXMLDoc的参数，表单里要传递的数据[废话]
*/

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

3。select的显示与隐藏，以及cookie操作。
既然select不能被div挡住，那就把他干掉吧！

还要准备一套cookie函数
网络最大的好处：对于某些问题，你只需知道该干什么就可以了，至于具体该怎么做已经有人帮你做好了。
下面我就随便在论坛里搜了一下，就找到了一个
http://www.phpchina.com/bbs/view ... a=page=1&sid=4jSn3r

var Cookie=
{
        check:function(){
                 //判断cookie是否开启
                 var cookieEnabled=(navigator.cookieEnabled)? true : false;
                 //如果浏览器不是ie4+或ns6+
                 if (typeof navigator.cookieEnabled=="undefined" && !cookieEnabled){
                  document.cookie="testcookie";
                  cookieEnabled=(document.cookie=="testcookie")? true : falsedocument.cookie="";
                 }

                 //如果没有开启
                 if(cookieEnabled){
                  return true;
                 }else{
                  return false;
                 }
        },
        add:function(name,value,expireHours){
                 var cookieString=name+"="+escape(value);
                 //判断是否设置过期时间
                 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<arrCookie.length;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。前面提到的回调函数以及后台的两个页面
最后再说一下前面提到的回调函数Login.checkLogin。登陆后你需要做什么，写在Login.loginSuccess里就行了，最后为了方便使用稍有改变。

/*这里没有检验是否支持cookie，在login弹出的时候检测了.不支持cookie的话，登陆窗口都弹不出来。*/
var Login=
{
        statu: 0,
         /*这就是里登陆成功的话，需要做的处理。通常是把整个页面登陆前后不同的地方处理一下。你可以重载一下*/
        loginSuccess:function(){
                document.getElementById(login_result).innerHTML=Cookie.get(username)+已经登陆;
                alert(登陆成功了！);
        },
         /*这就是里登陆失败的话，需要做的处理。通常是把整个页面登陆前后不同的地方处理一下。你可以重载一下*/
        loginOutSuccess:function(){
                document.getElementById(login_result).innerHTML=Cookie.get(username)+刚成功退出;
                alert(退出成功！);
        },
        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(请检查你的用户名，密码以及验证码！);
                }
        },
        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;
        }
}

后台的代码我就不细说了，各自系统有各自的区别。我这里把测试用的代码贴出来，并说一下这些文件该做什么，你只要保证的你页面有这些作用就行了。

<?php
/**
* header里设置的字符编码格式要和你前台的一致，否则当出现双字节字符的时候就会出现乱码.
* 其他的都可以用setCookie的方式，写在cookie里传到前台。
* 其中标志登陆成功的 loginStatu必须设为1，其他的就看你的登陆是怎么处理的了
*/
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);
}?>

/*验证码程序就不用说了吧！我这里是测试用的，所以就随便截了个时间做验证码*/
<?php
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);
?>

最后看看LoginDialog类理解全过程：

主要是看show()
hide()只是还原操作

//当不支持cookie的时候提示错误，并退出
if(!Cookie.check()){alert(你的浏览器不支持cookie,无法正常登陆);return}

//当支持cookie而cookie.loginstatu的值为1时，说明已经登陆。就不用重复登陆了。
else if(Cookie.get(loginStatu)==1){alert(你已经登陆！);return}

//设置Login.statu=1;表示当前正在做登陆操作
Login.statu=1;

//透明背景层显示
this.overDiv.show();

//隐藏select
Select.hide();

//刷新验证码
Login.getVcode();

//显示登陆窗口
this.dialog.style.display=;
在完成以上这些步骤以后，就是分为iframe还是ajax两种方式提交表单了。
而提交完表单后：
如果是iframe形式提交,iframe的onload事件会调用Login.checkLogin(),当check成功时，他会对应调用Login.loginSuccess()和Login.loginOutSuccess()
而ajax则是把Login.checkLogin做为回调函数来激活。
因此，登陆成功后具体做什么由 Login.loginSuccess()和Login.loginOutSuccess()决定。使用的时候，重载一下它们就可以了。

本文地址：http://www.phprm.com/frame/php1004847.html

转载随意，但请附上文章地址:-)

标签：none

PHP入门

网易,佳人有约登录效果

发表留言