欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

网易,佳人有约登录效果_PHP教程

程序员文章站 2022-06-13 14:02:27
...
我们先把上面拆解出来的功能完成!
1。透明层(显示与隐藏)
关键是要同时设置下面这几个样式,才能使主流浏览器上都现实透明的效果。

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


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

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。表单提交(ajax或iframe)
迅雷上的是用的iframe,我们这里先说iframe
iframe就简单多了,form的target属性设置为某个iframe的name就可以了。设置iframe的onload属性,那么当表单提交完成以后他就会执行相应处理。





如果用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挡住,那就把他干掉吧!

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


还要准备一套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 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';
}
}


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


/**
* 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');
}?>

/*验证码程序就不用说了吧!我这里是测试用的,所以就随便截了个时间做验证码*/
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类理解全过程:

function LoginDialog(formid)
{
this.dialog = document.getElementById(formid||'login_box');
this.overDiv = this.overDiv ||new Lightbox();
}
LoginDialog.prototype =
{
show:function(){
if(!Cookie.check()){alert('你的浏览器不支持cookie,无法正常登陆');return}
else if(Cookie.get('loginStatu')==1){alert('你已经登陆!');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';
}
}


主要是看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()决定。使用的时候,重载一下它们就可以了。


www.bkjia.comtruehttp://www.bkjia.com/PHPjc/445128.htmlTechArticle我们先把上面拆解出来的功能完成! 1。透明层(显示与隐藏) 关键是要同时设置下面这几个样式,才能使主流浏览器上都现实透明的效果...