Use javascript to control cookie display and hide background images

During major holidays, the homepage of major websites will be dressed in holiday costumes. Designers generally use large background images to achieve better visual impact. Of course, consider that some users are not used to this large background image. Therefore, it is necessary to place the "close" button on the background image. If you click "Close background", the large background image will disappear.

We use javascript to control the display and hiding of background images. When you click the close button, control CSS so that the page does not load background images, record COOKIE-related parameters, and set the cookie validity period, when the page is refreshed within the cookie validity period, the background image is no longer loaded. If the cookie is invalid, the background image is reloaded.

HTML

Generally, the close button of the background image is placed in the header of the page. We place the close background button on the top of the page. Of course, this button is a good image.

Copy codeThe Code is as follows:
<Div id = "top">
<Em id = "close_btn" title = "Close background"> </em>
</Div>

CSS

You also need to prepare a large background image. We can find a large background image on the Internet and use CSS for simple page layout.

 Copy codeThe Code is 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 is deployed, the page has no effect. We need to use javascript to load the background image.
Javascript
When loading the page for the first time (no cookie is set yet), of course, you must load the background image to display the complete page effect. When we click "close", Javascript will erase the background image that has been loaded on the page, that is, it will not be displayed, and set the cookie, the cookie expiration time is used to control whether the large background image is displayed. That is, if the cookie does not expire when you refresh the page next time, the large background image is not loaded. Otherwise, the large background image is loaded. See the Code:

 Copy codeThe Code is 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 background images by setting the CSS background attribute of page elements, and read and set cookies through getCookie () and setCookie.

 Copy codeThe Code is as follows:
// Set cookie
Function setCookie (name, value ){
Var exp = new Date ();
Exp. setTime (exp. getTime () + 1*60*60*1000); // valid for 1 hour
Document. cookie = name + "=" + escape (value) + "; expires =" + exp. toGMTString ();
}
// Cookies Function
Function getCookie (name ){
Var arr = document. cookie. match (new RegExp ("(^ |)" + name + "= ([^;] *) (; | $ )"));
If (arr! = Null) return unescape (arr [2]); return null;
}