Use JavaScript to control cookies display and hide background _javascript tips

Whenever major festivals, the main mainstream web site will be covered with festive costumes, designers generally use large background images to achieve better visual impact, of course, but also to consider some users are not accustomed to this large background image, then put the "close" button on the background map is necessary, the user just click the "Close the Background" button, The large background image will disappear.

We use JavaScript to control the display of background pictures and hidden, when clicked on the Close button, control CSS so that the page does not load the background map, while recording cookie-related parameters, and set the validity of the cookie, then in the cookie Lifetime Refresh page, will not load the background image, If the cookie fails, the background picture is reloaded.

Html

General background picture of the Close button is placed on the head of the page, we put the button on the top of the page to close the background, of course, this button is a good picture.

Copy Code code as follows:

<div id= "Top" >
<em id= "close_btn" title= "Off background" ></em>
</div>

Css

Also need to prepare large background picture, we look for a large background image from the Internet to use, to do a simple page layout with CSS.

Copy Code code as follows:

*{margin:0; padding:0}
body{font:12px/18px "Microsoft Yahei", Tahoma,arial,verdana, "\5b8b\4f53", 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;}

After the CSS has been deployed, the page has no effect and we need to use JavaScript to load the background picture.
Javascript
When the page is loaded for the first time (no cookies are set at this time), of course, the background picture is loaded to show the full page effect. When we click on the "Close" button, this time JavaScript will be the page has loaded the background image to kill, that is not displayed, and set the cookie, through the expiration of the cookie to control the large background picture is displayed. That is, the next time the page is refreshed, if the cookie does not expire, the large background image will not be loaded, or the large background image should be loaded, please look at the code:

Copy Code code as follows:

$ (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");
}
Click Close
$ ("#close_btn"). Click (function () {
$ ("body,html"). CSS ("Background", "none");
$ ("#close_btn"). Hide ();
Setcookie ("MAINBG", "0");
});
})

Obviously, we control the loading of the background image by setting the CSS background background property of the page element, and read and set the cookie by GetCookie () and Setcookie () two custom functions.

Copy Code code as follows:

Set cookies
function Setcookie (name,value) {
var exp = new Date ();
Exp.settime (Exp.gettime () + 1*60*60*1000);/valid for 1 hours
Document.cookie = name + "=" + Escape (value) + "expires=" + exp.togmtstring ();
}
Take cookies function
function GetCookie (name) {
var arr = Document.cookie.match (New RegExp ("(^|)" +name+ "= ([^;] *)(;|$)"));
if (arr!= null) return unescape (arr[2)); return null;
}