Use JavaScript to control cookies to display and hide background images

Source: Internet
Author: User
Tags set cookie setcookie

  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; }   
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.