ホームページ ウェブフロントエンド jsチュートリアル JavaScript を使用して Cookie を制御し、背景画像の表示と非表示を切り替える_JavaScript スキル

JavaScript を使用して Cookie を制御し、背景画像の表示と非表示を切り替える_JavaScript スキル

May 16, 2016 pm 05:00 PM
cookie

主要なフェスティバルの期間中、デザイナーは通常、より良い視覚的効果を得るために大きな背景画像を使用しますが、その場合は背景画像も考慮する必要があります。背景画像に「閉じる」ボタンを配置します。ユーザーが「背景を閉じる」ボタンをクリックすると、大きな背景画像が消えます。

背景画像の表示・非表示をJavaScriptを使用して、閉じるボタンをクリックした際にページに背景画像が読み込まれないように制御すると同時に、COOKIE関連のパラメータを記録します。 Cookie の有効期間が設定されると、Cookie の有効期間内にページが更新され、Cookie の有効期限が切れると、背景画像が再ロードされます。

HTML

通常、背景画像の閉じるボタンはページの先頭に配置されます。もちろん、このボタンは既製の画像です。

コードをコピー コードは次のとおりです:

<div id="top"> ;
<em id="close_btn" title="背景を閉じる"></em>

CSS

大きな背景画像も用意する必要があります。インターネットから大きな背景画像を見つけて、CSS を使用して簡単なページ レイアウトを作成します。

コードをコピーします コードは次のとおりです。
*{margin:0; }
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"5b8b4f53", sans-serif;}
#top{clear:both;width:1000px;height:60px;margin :0 auto ;overflow:hidden;position:relative;}
#close_btn{width:60px;height:20px;position:absolute;right:0;bottom:25px;cursor:pointer
display:block; z-index :2;}

CSS をデプロイした後、ページにはまだ効果がありません。JavaScript を使用して背景画像をロードする必要があります。

JavaScript
ページが初めてロードされるとき (この時点では Cookie などが設定されていません)、完全なページ効果を表示するには、もちろん背景画像をロードする必要があります。 「閉じる」ボタンをクリックすると、JavaScript はページにロードされている背景画像を強制終了して表示しなくなり、Cookie を設定して、Cookie の有効期限まで大きな背景画像を表示するかどうかを制御します。 。つまり、次回ページが更新されるときに、Cookie の有効期限が切れていない場合は、大きな背景画像が読み込まれません。コード


$(function(){
if(getCookie(" mainbg")==0){
$(" body,html").css("background","none");
$("#close_btn").hide();
} else{
$("body").css( "background","url(images/body_bg.jpg)) no-repeat 50% 0");
$("html").css("背景","url(images/html_bg.jpg)repeat- x 0 0");
$("#close_btn").show().css("背景","url(images/close_btn.jpg) no-repeat");
}
/ /クリックして閉じます
$("#close_btn").click(function(){
$("body,html").css("背景","なし");
$("# close_btn").hide();
setCookie("mainbg","0");
});
})


明らかに、ページ要素の CSS 背景属性を設定することで背景画像の読み込みを制御し、getCookie() と setCookie() という 2 つのカスタム関数を通じて Cookie を読み取り、設定します。



//Cookie を設定
function setCookie (name,value){
var exp = new Date();
exp.setTime(exp.getTime() 1*60*60*1000); // 有効期間 1 時間
document.cookie = name "="escape (value) ";expires=" exp.toGMTString()
}
//Cookie を取得 function
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )" name "=([^;]*)(;|$)")); if(arr != null) return unescape(arr[2) ]);
}


を返します。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Cookie はどこに保存されますか? Cookie はどこに保存されますか? Dec 20, 2023 pm 03:07 PM

Cookie はどこに保存されますか?

コンピューター上の Cookie はどこにありますか? コンピューター上の Cookie はどこにありますか? Dec 22, 2023 pm 03:46 PM

コンピューター上の Cookie はどこにありますか?

Google ChromeでRoblox 403 Forbiddenエラーを修正する方法 Google ChromeでRoblox 403 Forbiddenエラーを修正する方法 May 19, 2023 pm 01:49 PM

Google ChromeでRoblox 403 Forbiddenエラーを修正する方法

モバイル Cookie はどこにありますか? モバイル Cookie はどこにありますか? Dec 22, 2023 pm 03:40 PM

モバイル Cookie はどこにありますか?

Cookie 漏洩の危険性は何ですか? Cookie 漏洩の危険性は何ですか? Sep 20, 2023 pm 05:53 PM

Cookie 漏洩の危険性は何ですか?

ブラウザの Cookie が保存される場所の詳細な説明 ブラウザの Cookie が保存される場所の詳細な説明 Jan 19, 2024 am 09:15 AM

ブラウザの Cookie が保存される場所の詳細な説明

クッキーの仕組み クッキーの仕組み Sep 20, 2023 pm 05:57 PM

クッキーの仕組み

Cookie をクリアすると何か影響がありますか? Cookie をクリアすると何か影響がありますか? Sep 20, 2023 pm 06:01 PM

Cookie をクリアすると何か影響がありますか?

See all articles