Use JavaScript to control cookies to display and hide background images

  This article mainly introduces the use of 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

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 images and hide, when the click on the Close button, control CSS so that the page does not load the background map, while recording the cookie-related parameters, and set the validity of the cookie, then in the cookie validity period to refresh the page, The background image will not be loaded again, and if the cookie fails, the background image will be 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.     Code as follows: <div id= "Top" >      <em id= "close_btn" title= "Close Background" ></em>  </div>      CSS   also need to prepare a large background picture, we look for a large background image from the Internet to use, to do a simple page layout with CSS.     Code 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 the deployment of CSS, the page has no effect, we need to use JavaScript to load the background picture. Javascript when the page is first loaded (there is no cookie set at this time), of course, the background pictureLoad to display 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, it will not load a large background picture, and then load a large background picture, see Code:     Code as follows: $ (function () {      if (GetCookie ( "MAINBG") ==0 {          $ ("body,html"). CSS ("Background", "none");        & nbsp $ ("#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 off       $ (" #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 through the GetCookie () and Setcookie () two custom functions to read and set cookies.     Code as follows://Set cookie  function Setcookie (name,value) {      var exp = new Date ();   &NBSP ;   Exp.settime (Exp.gettime () + 1*60*60*1000);/valid 1 hours       Document.cookie = name + "=" + Escape (value) + "; expires=" + exp.togmtstring (); } //Fetch cookies function   function GetCookie (name) {      var arr = Document.cookie.match (new RegExp (^|) +name+ "= ([^;] *) (; |$) ");      if (arr!= null) return unescape (arr[2)); return null; }