Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "how to use Javascript to control Cookie". In the operation of practical cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

HTML

Generally speaking, the close button of the background image is placed at the head of the page, and we put the button to close the background at the top of the page. Of course, this button is a good picture.

CSS

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

{margin:0; padding:0} body {font:12px/18px "Microsoft Yahei", Tahoma,Arial,Verdana, "5b8b4f53", sans-serif;color:#808080;} # 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 css, the page has no effect, so we need to use javascript to load the background image.

Javascript

When the page is loaded for the first time (there is no cookie, etc.), of course, the background image should be loaded to show the full page effect. When we click the "close" button, Javascript will kill the background image that has been loaded on the page, that is, it will not be displayed, and set cookie to control whether the background image is displayed through the expiration time of cookie. That is, if the cookie does not expire the next time the page is refreshed, the large background image will not be loaded. Otherwise, the large background image will be loaded. Please see the code:

$(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 background property of the page element, and read and set the cookie through the two custom functions, getCookie () and setCookie ().

/ / set cookie function setCookie (name,value) {var exp = new Date (); exp.setTime (exp.getTime () + 1 / 60 / 60 / 1000); / valid for 1 hour [xss_clean] = name+ "=" + escape (value) + "; expires=" + exp.toGMTString ();} / take cookies function function getCookie (name) {var arr = [xss_clean] .match (new RegExp ("(^ |)" + name+ "= ([^;] *) (; | $") If (arr! = null) return unescape (arr [2]); return null;}

When setting the validity period of cookie, we can set it for 10 days or half a month according to the actual demand. In this article, only one hour is set for the demonstration. Please take a look at the DEMO demonstration.

This is the end of "how to use Javascript to control Cookie". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.