使用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;
}

赞 (0)

相关推荐

  • javascript随机显示背景图片的方法

    本文实例讲述了javascript随机显示背景图片的方法.分享给大家供大家参考.具体如下: 将以下代码加入HTML的<head></head>之间: <script LANGUAGE="JavaScript"> bg = new Array(2); //设定图片数量,如果图片数为3,这个参数就设为2,依次类推 bg[0] = 'bg1.gif' //显示的图片路径,可用http:// bg[1] = 'bg2.gif' bg[2] = 'bg3.gi

  • javascript背景时钟实现方法

    本文实例讲述了javascript背景时钟实现方法.分享给大家供大家参考.具体如下: 以下是这个效果的全部代码.[最好从一个空页面开始] <html> <head> <TITLE>背景时钟</TITLE> <script language=javaScript> <!--// function clockon() { thistime= new Date() var hours=thistime.getHours() var minutes

  • JavaScript实现更改网页背景与字体颜色的方法

    JavaScript实现更改网页背景与字体颜色的方法

    本文实例讲述了JavaScript实现更改网页背景与字体颜色的方法.分享给大家供大家参考.具体分析如下: JavaScript,通过点击按钮更改网页背景与字体的颜色,网页中有N个改变颜色的按钮,点击不同的按钮,网页的字体与背景就会改变成不同的颜色.很简单的JavaScript小程序. 一.基本目标 一打开网页首先提示问候信息"你好" 网页中有N个改变颜色的按钮,其中返回是返回网页的默认颜色,背景是白的,字体是黑的 点击不同的按钮,网页的字体与背景就会改变成不同的颜色. 本来想做出彩虹起

  • 一个可以得到元素真实的背景颜色的javascript脚本

    得到元素真实的背景颜色 by Longbill .classname {background-color:#ff99dd;} #div3 {background-color:#d8bfd8;} div {background-color:#87cefa;border:1px solid #333333;margin:10px;padding:4px;} body {background-color:#bed742;} #div4 {background-color:transparent;} 得

  • Javascript简单改变表单元素背景的方法

    本文实例讲述了Javascript简单改变表单元素背景的方法.分享给大家供大家参考.具体如下: 这里使用Javascript改变表单元素的背景,如改变文本框的背景 function colorChange(formName,formItem){ document.forms[formName.name].elements[formItem.name].style.backgroundColor = "#FFFFFF"; } 希望本文所述对大家的javascript程序设计有所帮助.

  • JavaScript让网页出现渐隐渐显背景颜色的方法

    本文实例讲述了JavaScript让网页出现渐隐渐显背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>javascript渐隐渐显的背景颜色</title> <style fprolloverstyle>A:hover

  • JavaScript生成的动态下雨背景效果实现方法

    本文实例讲述了JavaScript生成的动态下雨背景效果实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <HTML> <HEAD> <TITLE>JavaScript生成的动态下雨背景效果</TITLE> </HEAD> <BODY bgcolor="#fef4d2" > <center> <script language=JavaScript> <!-- [

  • JavaScript动态修改背景颜色的方法

    本文实例讲述了JavaScript动态修改背景颜色的方法.分享给大家供大家参考.具体如下: <html> <head> <title>Background Color Changer</title> <script language = JavaScript> <!-- function BG_yellow() { document.bgColor = 0xFFFF00 } function BG_thistle() { document.

  • javascript实现随时变化着的背景颜色

    很简单的一段背景颜色时刻发生变化的代码 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #dv {width: 100px;height: 100px;} </style> </head> <script>

  • 使用javascript控制cookie显示和隐藏背景图

    每当重大节日期间,各大主流网站首页会披上节日的盛装,设计者一般会使用大幅背景图片来获得更好的视觉冲击效果,当然,也要考虑到有些用户不习惯这大背景图,那么在背景图上放置"关闭"按钮是有必要的,用户只要点击"关闭背景"按钮,大幅背景图将会消失. 我们使用javascript来控制背景图片的显示和隐藏,当点击关闭按钮时,控制CSS使页面不加载背景图,同时记录COOKIE相关参数,并设置cookie的有效期,那么在cookie有效期内刷新页面,是不会再加载背景图的,如果co

  • javascript控制层显示或隐藏的方法

    本文实例讲述了javascript控制层显示或隐藏的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head> <script language="JavaScript&qu

  • android控制密码显示与隐藏的方法

    android控制密码显示与隐藏的方法

    本文实例为大家分享了android控制密码显示与隐藏的具体代码,供大家参考,具体内容如下 <RelativeLayout             android:id="@+id/view2"             android:layout_width="match_parent"             android:layout_height="60dp"             android:layout_marginTop

  • jQuery控制元素显示、隐藏、切换、滑动的方法总结

    jQuery 隐藏和显示 通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示: 实例 复制代码 代码如下: $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); hide() 和 show() 都可以设置两个可选参数:speed 和 callba

  • javascript 控制 html元素 显示/隐藏实现代码

    1.编写js函数 <script type="text/javascript"> function display(y){$(y).style.display=($(y).style.display=="none")?"":"none";} function $(s){return document.getElementById(s);} </script> 2. 要显示/隐藏的html元素加上 id

  • js控制页面控件隐藏显示的两种方法介绍

    javascript控制页面控件隐藏显示的两种方法,方法的不同之处在于控件隐藏后是否还在页面上占位 方法一: 复制代码 代码如下: document.all["panelsms"].style.visibility="hidden"; document.all["panelsms"].style.visibility="visible"; 方法二: 复制代码 代码如下: document.all["panelsms&

  • React控制元素显示隐藏的三种方法小结

    目录 React控制元素显示隐藏的方法 方法一 方法二 方法三 React切换显示和隐藏 总结 React控制元素显示隐藏的方法 React控制元素显示和隐藏的方法目前我知道的有三种方法: 第一种是通过state变量来控制是否渲染元素,类似vue中的v-if. 第二种是通过style控制display属性,类似vue 中的v-show. 第三种是通过动态切换className. 方法一 第一种方法是通过此例中showElem变量来控制是否加载元素的,如果showElem为false,内容是直接不

  • 基于PyQt5实现状态栏(statusBar)显示和隐藏功能

    首先,讲述要解决的两个问题以及解决问题的代码: 1.将鼠标放置于菜单栏上状态栏永久消失的问题(这个问题需要仔细观察才能注意到) # 此覆盖父类函数: 覆盖方法: 为了克服 将鼠标放置于菜单栏上 状态栏就消失的问题: def event(self, QEvent): if QEvent.type() == QEvent.StatusTip: if QEvent.tip() == "": QEvent = QStatusTipEvent("ready!") # 此处为要

  • 控制input输入框中提示信息的显示和隐藏的方法

    在运用html+css+javascrpt进行页面制作时,我们往往会遇到一些影响用户体验,而又容易被我们忽视的小细节.比如,input输入框中的提示信息,怎样才能根据对象获得和失去焦点而实现其显示和隐藏.今天在这里,想跟大家分享一下这个小技巧,希望各位大神不要拍砖哦~~~ 一.要求 input输入框,在光标显示时,隐藏提示信息:光标离开输入框时,显示提示信息. 二.方法 1.给该input取id名,Onfocus="方法名1(this)",onblur="方法名2(this)

  • JS控制HTML元素的显示和隐藏的两种方法

    利用来JS控制页面控件显示和隐藏有两种方法,两种方法分别利用HTML的style中的两个属性,两种方法的不同之处在于控件隐藏后是否还在页面上占空位. 方法一: document.getElementById("EleId").style.visibility="hidden"; document.getElementById("EleId").style.visibility="visible"; 利用上述方法实现隐藏后,页面

随机推荐