溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“如何使用Javascript控制Cookie”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
一般背景圖片的關閉按鈕都是放在頁面頭部的，我們在頁面的頂部放置關閉背景的按鈕，當然這個按鈕是做好的圖片。
<p id="top">
<em id="close_btn" title="關閉背景"></em>
</p>
還需要準備大背景圖片，我們從網上找張大背景圖拿來用，用CSS做簡單的頁面布局。
*{margin:0; padding:0}
body{font:12px/18px "Microsoft Yahei",Tahoma,Arial,Verdana,"5b8b4f53", sans-serif;color:#808080;}
#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來加載背景圖片。
當第一次加載頁面時（這時還沒有設置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("background","url(images/html_bg.jpg) repeat-x 0 0");
$("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat");
}
//點擊關閉
$("#close_btn").click(function(){
$("body,html").css("background","none");
$("#close_btn").hide();
setCookie("mainbg","0");
});
})
很顯然，我們是通過設置頁面元素的CSS背景background屬性來控制背景圖的加載，并且通過getCookie()和setCookie()兩個自定義函數來讀取和設置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();
}
//取cookies函數
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}
在設置cookie有效期的時候，我們可以根據實際需求設置10天、半個月，本文為了演示只設置了1小時，請看DEMO演示。
“如何使用Javascript控制Cookie”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
