Use javascript to control cookies to show and hide background images_javascript skills

During major festivals, the homepages of major mainstream websites will be dressed in festive attire. Designers generally use large background images to obtain better visual impact. Of course, some users must also be considered. background image, then it is necessary to place a "Close" button on the background image. As long as the user clicks the "Close Background" button, the large background image will disappear.

We use javascript to control the display and hiding of the background image. When the close button is clicked, the CSS is controlled so that the page does not load the background image. At the same time, COOKIE related parameters are recorded, and the validity period of the cookie is set. Then the page is refreshed within the cookie validity period. The background image will not be loaded again. If the cookie expires, the background image will be reloaded.

HTML

Generally, the close button of the background image is placed at the head of the page. We place the button to close the background at the top of the page. Of course, this button is a ready-made image.

Copy code The code is as follows:

CSS

We also need to prepare a large background image. We find a large background image from the Internet and use CSS to make a simple page layout.

Copy code The code is as follows:

*{margin:0; padding: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;}

After deploying the css, the page has no effect yet. We need to use javascript to load the background image.
Javascript
When the page is loaded for the first time (no cookies, etc. have been set at this time), of course the background image must be loaded to display the complete page effect. When we click the "Close" button, Javascript will kill the background image that has been loaded on the page, that is, not display it, and set a cookie to control whether the large background image is displayed through the expiration time of the cookie. That is, when the page is refreshed next time, if the cookie has not expired, the large background image will not be loaded. Otherwise, the large background image will be loaded. Please see the code:

Copy Code The 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 to 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 attribute of the page element, and read and set cookies through two custom functions, getCookie() and setCookie().

Copy code The code is as follows:

//Set cookie
function setCookie (name,value){
var exp = new Date();
exp.setTime(exp.getTime() 1*60*60*1000); // Validity period 1 hour
document.cookie = name "=" escape (value) ";expires=" exp.toGMTString();
}
//Get cookies function
function getCookie(name){
var arr = document.cookie. match(new RegExp("(^| )" name "=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
}