次のケースでは、js を使用してページ フローティング レイヤー効果を実装し、js を使用して 2 つのメソッドを通じて Cookie を読み書きし、ユーザーが広告をオフにした表示ステータスを実現します。
読者は次のコードを HTML ファイルにコピーして効果を試すことができます。HTML の pre タグには 2 つの js 実装メソッドがあります。
次のようにコードをコピーします。
<!DOCTYPE HTML>
<html>
<頭>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type"/>
<meta content="ヤン・カイ" name="description"/>
<meta name="著者" content="http://blog.csdn.net/tianyazaiheruan"/>
<meta name="copyright" content="著作権 by Yang Kai"/>
<title>IT_ブログ_ヤン カイ</title>
</head>
<本文>
<div>
この記事の著者: IT_Blog_Yang Kai
転載する場合は出典を明記してください: <a href=”http://blog.csdn.net/yangkai_hudong”>http://blog.csdn.net/yangkai_hudong</a>
</div>
<br>
<div>
<前>
1. 1つ目: jQueryのCookieライブラリを使用する
例は現在使用されているjsです。関連するコードは次のとおりです。
$(document).ready(function () {
var adCookie=$.cookie("docCookie");
// ローカルに cookie がない場合は、エントリ cookie をローカルに書き込みます
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//エントリ Cookie がローカルに存在する場合、フローティング レイヤーは表示されません。
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//広告を閉じてフローティングレイヤーを非表示にします
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{有効期限:60});
});
});
//jQuery クッキー ライブラリ
jQuery.cookie = 関数(名前、値、オプション) {
if (typeof value != 'unknown') { // 指定された名前と値、Cookie を設定
オプション = オプション {};
if (値 === null) {
値 = '';
options.expires = -1;
}
var の有効期限が切れます = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var 日付。
if (typeof options.expires == '数値') {
日付 = 新しい日付();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} それ以外 {
日付 = オプションの有効期限;
}
期限切れ = '; 期限切れ=' + date.toUTCString(); // 期限切れ属性を使用します。IE では max-age がサポートされていません。
}
var パス = オプション パス '; パス = ' + (オプション パス) : '';
var ドメイン = オプション.ドメイン ? '; ドメイン=' + (オプション.ドメイン) : '';
var secure = options.secure' : '';
document.cookie = [名前, '=', encodeURIComponent(value), 期限切れ, パス, ドメイン, セキュア].join('');
} else { // 名前のみを指定し、Cookie を取得します
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// この Cookie 文字列は、必要な名前で始まっていますか?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
壊す;
}
}
}
クッキー値を返します。
}
};
2. 2 番目のタイプ: Cookie を操作する JS サンプルを自分で書く
関連するjsは次のとおりです。
$(ドキュメント).ready(function() {
関数 writeCookie(名前,値)
{
var exp = 新しい日付();
exp.setTime(exp.getTime() + 7*24*60*60*1000);
document.cookie = 名前 + "="+ エスケープ (値) + ";expires=" + exp.toGMTString();
}
// クッキーを読み取る
関数 readCookie(名前)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg)){
return unescape(arr[2]);
}それ以外 {
null を返します。
}
}
var adCookie = readCookie("adCookie");
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//エントリ Cookie がローカルに存在する場合、フローティング レイヤーは表示されません。
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//広告を閉じてフローティングレイヤーを非表示にします
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
});
});
</pre>
</div>
<!--広告スタイル-->
<style type="text/css">
本文 {TEXT-ALIGN: 中央;}
#wapDocCookie{背景色:rgba(0,0,0,0.7);背景:#4b4b4b/9;幅:100%;テキスト整列:中央;位置:固定;パディング:10px 0 5px 0;下:0 ;左:0;}
#bkguancha{背景:url(http://static.hudong.com/35/86/26100000006141138683868789461.png)繰り返しなし;背景サイズ:280px;背景:url(http://static.hudong.com/50/69/26100000006141138683695381873.png)繰り返しなし 0 -36px/9;高さ:46px;幅:290px;表示:インラインブロック;オーバーフロー:非表示;行の高さ:99em;}
#closeAd{background:url(http://static.hudong.com/54/88/26100000006141138683883031718.png) リピートなし;背景サイズ:12px;背景:url(http://static.hudong.com/50/69/26100000006141138683695381873.png) no-repeat -278px 0/9;高さ:12ピクセル;幅:12ピクセル;表示:ブロック;位置:絶対;上:5ピクセル;右:10ピクセル;}
<!--広告 js -->
</スタイル>
<script type="text/javascript" src="http://www.huimg.cn/lib/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var adCookie=$.cookie("docCookie");
// ローカルに cookie がない場合は、エントリ cookie をローカルに書き込みます
if(adCookie!="adDocCookie"){
$("#wapDocCookie").show();
}
//エントリ Cookie がローカルに存在する場合、フローティング レイヤーは表示されません。
if(adCookie=="adDocCookie"){
$("#wapDocCookie").hide();
}
//広告を閉じてフローティングレイヤーを非表示にします
$("#closeAd").click(function(){
$("#wapDocCookie").hide();
$.cookie("docCookie","adDocCookie",{有効期限:60});
});
});
//jQuery クッキー ライブラリ
jQuery.cookie = 関数(名前、値、オプション) {
if (typeof value != 'unknown') { // 指定された名前と値、Cookie を設定
オプション = オプション {};
if (値 === null) {
値 = '';
options.expires = -1;
}
var の有効期限が切れます = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var 日付。
if (typeof options.expires == '数値') {
日付 = 新しい日付();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
} それ以外 {
日付 = オプションの有効期限;
}
期限切れ = '; 期限切れ=' + date.toUTCString(); // 期限切れ属性を使用します。IE では max-age がサポートされていません。
}
var パス = オプション パス '; パス = ' + (オプション パス) : '';
var ドメイン = オプション.ドメイン ? '; ドメイン=' + (オプション.ドメイン) : '';
var secure = options.secure' : '';
document.cookie = [名前, '=', encodeURIComponent(value), 期限切れ, パス, ドメイン, セキュア].join('');
} else { // 名前のみを指定し、Cookie を取得します
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// この Cookie 文字列は、希望する名前で始まっていますか?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
壊す;
}
}
}
クッキー値を返します。
}
};
</script>
<div id="wapDocCookie" style="display: none;">
<a id="bkguancha" href="http://www.baike.com/api.php?m=guancha&a=download" onclick="StatVirtualTraffic(document.referrer,window.location,'stat_hdstat_onclick_survey_wap_doc_foot_download')">クリックダウンロード</a>
<a id="closeAd" href="javascript:void(0)"> </a>
</div>
</body>
</html>