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"})
}