jQuery+cookie仿苏宁每天首页出现广告弹出层

收藏

在项目中经常遇到首页每天出现弹出层广告，一般我们用PHP或cookie插件http://www.erdangjiade.com/js/89.html来设置时间。今天站长用简单的cookie函数来做一个这样的基于jQuery的广告DEMO。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

弹出层图片、关闭按钮.new_close以及苏宁网页ifrmae

<div class="new_user"  id="new_user"> 
    <div class="new_pic"> 
        <a target="_blank" href="http://erdangjiade.com"> 
            <img alt="素材火大背景图片" src="images/pic.png"> 
        </a> 
    </div> 
    <span class="new_close" onclick="hideNewUser()"></span> 
</div> 
<div class="overlay" id="overlay"></div> 
<iframe src="http://www.erdangjiade.com/modals/4/444/demo/" width="100%" height="100%" scrolling="yes"/>

jQuery+cookie设置每天弹出一次广告，关闭后不再显示

var is_first = getCookie("is_first"); 
if (is_first != 1) { 
    showNewUser(); 
    var time = getTodayOtherTime(); //每天一次 
    setCookie("is_first", 1, time);//3600 * 24 有效期一天 
} else { 
    hideNewUser(); 
}

//设置cookies函数

function setCookie(name, value, time) { //name:cookie键名，value:cookie键值,和时间S 
    var exp = new Date(); 
    exp.setTime(exp.getTime() + time * 1000);//有效期1小时  
    document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString(); 
}

//从当前时间到明日0点的时间戳

function getTodayOtherTime() { 
    var today = new Date(); 
    today.setHours(0); 
    today.setMinutes(0); 
    today.setSeconds(0); 
    today.setMilliseconds(0); 
    //明日0点时间戳 
    var tomorrow_0 = today.getTime() / 1000 + (24 * 3600); 
    var current_time = Math.round(new Date().getTime() / 1000); 
    var expire = tomorrow_0 - current_time; 
    return expire; 
}

显示广告

function showNewUser() { 
    var document_height = $(document).height(); 
    var window_height = $(window).height(); 
    var height = document_height > window_height ? document_height : window_height; 
    $("#overlay").css({"height": height, "display": "block"}) 
    $("#new_user").show(); 
}

隐藏广告并关闭背景遮罩层

function hideNewUser() { 
    $("#new_user").hide(); 
    $("#overlay").css({"display": "none"}) 
}