欢迎您访问我爱IT技术网，今天小编为你分享的javascript教程：【使用javascript控制cookie显示和隐藏背景图】，下面是详细的讲解！
使用javascript控制cookie显示和隐藏背景图
每当重大节日期间，各大主流网站首页会披上节日的盛装，设计者一般会使用大幅背景图片来获得更好的视觉冲击效果，当然，也要考虑到有些用户不习惯这大背景图，那么在背景图上放置“关闭”按钮是有必要的，用户只要点击“关闭背景”按钮，大幅背景图将会消失。
我们使用javascript来控制背景图片的显示和隐藏，当点击关闭按钮时，控制CSS使页面不加载背景图，同时记录COOKIE相关参数，并设置cookie的有效期，那么在cookie有效期内刷新页面，是不会再加载背景图的，如果cookie失效，则又会重新加载背景图片。
HTML
一般背景图片的关闭按钮都是放在页面头部的，我们在页面的顶部放置关闭背景的按钮，当然这个按钮是做好的图片。
<div id="top">
<em id="close_btn" title="关闭背景"></em>
</div>
CSS
还需要准备大背景图片，我们从网上找张大背景图拿来用，用CSS做简单的页面布局。
*{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;}
部署完了css后，页面还没有什么效果，我们需要使用javascript来加载背景图片。
Javascript
当第一次加载页面时（这时还没有设置cookie等），当然要把背景图片加载，显示完整的页面效果。当我们点击“关闭”按钮时，这个时候Javascript会把页面已经加载的背景图片干掉，即不显示出来，并且设置cookie，通过cookie的过期时间来控制大背景图片是否显示。即当下次刷新页面时，如果cookie未过期，则不会加载大背景图片，反之则加载大背景图片，请看代码：
$(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");
}
//点击关闭
$("#close_btn").click(function(){
$("body,html").css("background","none");
$("#close_btn").hide();
setCookie("mainbg","0");
});
})
很显然，我们是通过设置页面元素的CSS背景background属性来控制背景图的加载，并且通过getCookie()和setCookie()两个自定义函数来读取和设置cookie的。
//设置cookie
function setCookie(name,value){
var exp=new Date();
exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小时
document.cookie=name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//取cookies函数
function getCookie(name){
var arr=document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr !=null) return unescape(arr[2]); return null;
}
关于使用javascript控制cookie显示和隐藏背景图的用户互动如下：
相关问题：javascript控制显示和隐藏
答：点击onclick="ka(1)，触发函数ka(i)，把“1”传到“i”中。 执行for循环，循环数为j,j从1循环到2。 document.getElementById("ka"+j)被执行两次， 得到document.getElementById("ka"+1)和document.getElementById("ka"+2)，然后都赋给kall，再使kall... >>详细
相关问题：div里面有一张图片 想让它默认显示为隐藏 我点击bu...
答：html内容：css内容：img#img{display:none;}javascript内容：function showImg(){document.getElementById('img').style.display='block';} >>详细
相关问题：如何用JavaScript控制另一页面的层显示隐藏
答： 测试 function ShowDiv(divi) { var detail_1= document.getElementById("div1"); var detail_2= document.getElementById("div2"); var detail_3= document.getElementById("div3"); if(divi==1) { detail_1.style.display ="block"; detail_2... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-