ホームページ  >  記事  >  バックエンド開発  >  NetEase、美容には予約ログイン効果があります_PHP チュートリアル

NetEase、美容には予約ログイン効果があります_PHP チュートリアル

WBOY
WBOYオリジナル
2016-07-20 11:05:161350ブラウズ

まずは上記で分解した関数を完成させましょう!
1.透明レイヤー (表示と非表示)
主流のブラウザで透明効果を実現するには、次のスタイルを同時に設定することが重要です。

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


透明レイヤー上でリアルなものを複数ソースで表現するこのエフェクトはご存知の方も多いかもしれません。ライトボックスといいます。ここでも次のように名前を付けました:

function Lightbox(id)
{
This.box = this.createBox();
this.id = id||'lightbox_id';
}
Lightbox.prototype=
{
createbox:{var box.getelementbyid(this.id)|| createelement( 'div');
Hide:function(){
this.box.style.display = 'none';フォーム送信 (ajax または iframe)
Thunlei は iframe について説明します。
iframe はフォームの target 属性を iframe の名前に設定するだけです。 iframeのonload属性を設定すると、フォーム送信完了時に対応する処理を実行します。







を使用する場合ajax のコードも非常にシンプルです。おそらく、誰もが異なる JS フレームワークを使用していると思います。しかし、それらのほとんどは似ており、誰でも一目でそれらが何を意味するかわかると思います。
ここではカテゴリーを列挙しません。カテゴリーの使い方についてだけ書きます。
これは実際には、『ajax in action』ブックに記載されているネット クラスです。

/*文字化けを避けるために encodeURIComponent を使用すればよいのではないかと思われるかもしれませんが、ここで encodeURIComponent を使用する必要はありません。クラス内で呼び出されています*/
/**
* 'login.php': ログイン認証ページ [ナンセンス]
* Login.checkLogin: ajax コールバック関数 [ナンセンス]
* loadXMLDoc のパラメータ、フォームで渡されるデータ [ナンセンス]
*/

new Ajax('login.php' , Login.CheckLogin) .loadxmldoc ({
ユーザー名: document.GetelementByid ('ユーザー名').値、
パスワード: Document.GetelementByid ('PasSword' ).VCode: Document.GetelementByid ('vcode ') 値
});

3. Cookieの表示・非表示や操作を選択します。
selectはdivでブロックできないので殺してしまいましょう!

var Select={

using using using var selects through using through out through out through out out through out off ‐ ‐ ‐ to = "表示"
},
Hide: function () {
var selects = document.GetelementsBytagName ('select');
for (varm m = 0; selects.Length; ) Selects [m] .style .visibility = "hidden";


も Cookie のセットを準備する必要があります。ネットワークの最大の利点: 一部の問題については、何をすべきかを知るだけで済みます。
フォーラムを検索して見つけました
http://www.phpchina.com/bbs/view ... a=page=1&sid=4jSn3r

4+ または ns6+

Cookienabled == "未定義" &&! Cookieenabled) {
document.cookie = "testCookie";
cookieenabled = (Document.cookie == "TESTCOKIE")? True : falsedocument.cookie = "" ";
}
// No (Cookie が有効) の場合 {
Return True;}} Else {
Return false;
}},
add: function (name, value,expirours) {
VAR COOKIESTRING = name+"="+エスケープ (値) ;
expireHours*3600*1000);
cookieString=cookieString+";expired= "+date.toGMTString();
.cookie;
var arrCookie=strCookie.split("; ");
用( var m=0;m arr=arrCookie[m]. return unescape(arr[ 1]); var date=new Date();
date.setTime(date.getTime() -10000);
document.cookie=name+"=;expire="+date.toGMTString();先ほどのコールバック関数と背景の 2 つのページ
最後に、前述のコールバック関数 Login.checkLogin について説明します。 Login.loginSuccess にログイン後に行うべきことを記述するだけです。最後に、便宜のために少し変更しました。

/* ここでは Cookie がサポートされているかどうかのチェックは行われません。Cookie がサポートされていない場合は、ログイン ウィンドウが表示されません。 * /

varlogin =

{
/通常、ログインの前後でページ全体のさまざまな部分が処理されます。リロードできます */
loginSuccess:function(){ document.getElementById('login_result').innerHTML=Cookie.get('username')+'すでにログインしています';

alert('ログイン成功!') ;

},
/*これは、ログインが失敗した場合に行う必要があることです。通常、ログインの前後でページ全体のさまざまな部分が処理されます。リロードできます */
loginOutSuccess:function(){ document.getElementById('login_result').innerHTML=Cookie.get('username')+'正常に終了しました';
alert('正常に終了しました!') ; (); );
}else if(Login.statu ();
}else if(Login.statu==1 )(ify_code').src='v code.php?cachetime='+new Date().getTime? ();
},
loginOut:function(){
Login.statu=2;
document.getElementById('login_submit_iframe').contentWindow.location='loginout .php'; }
}


勝ちますバックグラウンド コードについては詳しく説明しません。システムごとに独自の違いがあります。ここにテスト コードを投稿し、これらのファイルが何を行うべきかを説明します。必要なのは、ページにこれらの機能があることを確認することだけです。


/**
* ヘッダーに設定されている文字エンコーディング形式はフロントデスクの形式と一致している必要があります。そうしないと、全角文字が表示されると文字化けが発生します。
* その他の内容は、setCookie を使用して Cookie に書き込んでフロントデスクに送信できます。
* ログインの成功を示す「loginStatu」は 1 に設定する必要があり、残りはログインの処理方法によって異なります
*/
header('content-type:text/html; charset=utf-8');
session_start();
$username = 'phpchina';
$パスワード = '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} l Else if (cookie.get ('loginstatu') == 1) {Alert ('ログインしました!');
login.stata = 1; .show ();
選択します。 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}


//Set Login.statu=1; は、ログイン操作が現在進行中であることを示します。

Login.statu =1;


//透明背景レイヤー表示

this.overDiv.show();


//selectを非表示

Select.hide();


//確認コードを更新

Login.getVcode() ;


/ /ログインウィンドウを表示します

this.dialog.style.display='';

上記の手順を完了した後、フォームを送信するには iframe または ajax の 2 つの方法があります。
フォームを送信した後:
iframe フォームで送信された場合、iframe の onload イベントは Login.checkLogin() を呼び出します。チェックが成功すると、それに応じて Login.loginSuccess() と Login.loginOutSuccess() が呼び出されます。
そしてajaxはLogin.checkLoginをコールバック関数として有効化します。
したがって、ログイン成功後の動作は Login.loginSuccess() と Login.loginOutSuccess() によって決まります。使用するときはリロードするだけです。


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

tru​​ehttp://www.bkjia.com/PHPjc/445128.html技術記事まずは上記で分解した関数を完成させましょう! 1.透明レイヤー (表示と非表示) 重要なのは、主流のブラウザーで透明効果を実現するには、次のスタイルを同時に設定することです...
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。