cookie设置不再提示功能效果-Javascript控制Cookie关闭大背景

案例一、如图示例

如图可以看到，当点击右边叉叉不在提示时候，在火狐浏览器中可以看到cookie写入了如图中所示，当再刷新浏览器的时候，这个APP下载提示不会在显示出来，过段时间，当打开这个页面的时候再会出现这个APP下载提示；

HTML结构：

<!--APP下载提示 start-->
<div class="welcome-app-download">
       <div class="welcome-app-box">
       <a href="http://m.mbaobao.com/app.html"  style="display:block;">
        <div class="welcome-app-logo"><img alt="mbbicon"  src="indexjscss/mbb-app-icon.png"  width="100%"></div>
        <div class="welcome-app-text">
            <p>下载APP登陆就送77元</p>
                <p>更多特价商品，尽在麦包包APP</p>
        </div>
        <span class="welcome-app-link">立即下载</span>
      </a>
      <a href="javascript:void(0);"  class="welcome-app-close"></a>
</div>
<!--APP下载提示 end-->

JS代码为：

<script type="text/javascript">
$(".welcome-app-close").click(function(){
 var date = new Date();
date.setTime(date.getTime() + 7*24*3600*1000);
document.cookie = "client_app2=no-show;expires=" + date.toGMTString() + " ;path=/";
 $(".welcome-app-download").css("display","none");
 $(".m-footer").css("padding-bottom","0px");
});

var _cookie = document.cookie;
if( !(_cookie.indexOf('client_app2') >= 0) )
{
$('.welcome-app-download').css('display' , 'block');
$(".m-footer").css("padding-bottom","46px")
}
</script>

 文件分享下载如下：baiduyunguanjia-javascript实例-20141018-麦包包触屏cookie设置不再提示效果

 

案例二：如图所示

如图所示，当点击叉叉时候，这个背景图会被隐藏掉，直到一个小时候之后，cookie才清除掉，这个会是一个很好的体验！

HTML代码：

<div id="top">
    <em id="close_btn" title="关闭背景"></em>
</div>
<div id="main">
    <p>点击右上角的关闭按钮即可关闭背景图。COOKIE有效期1小时</p>
    <p><a href="http://www.helloweba.com/view-blog-238.html">返回教程：使用Javascript控制Cookie关闭大背景</a></p>
</div>

CSS代码为：

#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;}
#main{width:960px; height:400px; margin:100px auto; text-align:center; line-height:60px; font-size:16px; color:#FC0}

JS代码为：

<script type="text/javascript">
//设置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();
}
//取cookie函数
function getCookie(name){
    var arr =document.cookie.match(new RegExp("(^| )"+name+"=([^;]*) (;|$)"));
    if(arr !=null) return unescape(arr[2]); return null;
}
$(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");
    });
});
</script>

文件分享下载如下：baiduyunguanjia-javascript实例-20151012-使用Javascript控制Cookie关闭大背景

文章来自：http://www.helloweba.com/view-blog-238.html