功能
主要實現(xiàn)的功能是有個活動的結果彈窗需要每天進入頁面時自動彈出來一次,然后點擊關閉之后峡继,當天只彈出一次,直到活動結束 2018-1-1 為止
實現(xiàn)邏輯
- 使用
addCookie
SetCookie
getCookie
三個公用的方法來實現(xiàn)操作 - 首次載入頁面時先判斷當前時間是否在活動時間內宾添,之后使用
getCookie
判斷 cookie 是否存在:
如果不存在使用addCokie
添加 cookie(這里的 cookie 的值我設置為當天的日期值了)并彈出彈窗填硕;
如果存在的話判斷 cookie 的值,如果等于當天的日期值彈出彈窗 - 在關閉彈窗的時候也得先判斷是否有這個 cookie 炼吴,因為可能活動已經(jīng)結束了,再使用
SetCookie
對 cookie 的值進行修改疫衩,這里將當天的日期值加 1 后的值賦給SetCookie
的第二個參數(shù)硅蹦,再用活動結束后的時間減去當天的時間最后算出離活動還有幾天的天數(shù),將這個天數(shù)的值當作是SetCookie
的第三個參數(shù)闷煤,這里需要注意的是如果天數(shù)小于 1 那么這個方法執(zhí)行完之后會默認將 cookie 刪掉 - 整個的執(zhí)行測試過程:在今天進入這個頁面之后因為沒有 cookie 會生成這個 cookie 童芹,cookie 的有效時間至活動結束之前(addCookie 的第三個參數(shù),這個是按照小時數(shù)換算的)鲤拿,cookie 的值(第二個參數(shù))設置為當天的日期假褪,這時點擊關閉彈窗的按鈕修改 cookie 的日期值,之后在今天的其他時間之內再次進入頁面的時候會進行日期判斷近顷,此時的日期值會是明天的所以不會彈出彈窗生音,到了第二天再次進入時因為日期值又相等了宁否,所以還會有彈窗,然后點擊關閉日期加 1 缀遍,這樣直至活動結束慕匠,最后在 2018-1-1 日進入時,彈出彈窗之后再點擊關閉按鈕域醇,時間相減的值取整數(shù)為 0 台谊,這樣
SetCookie
執(zhí)行后會自動將這個 cookie 刪掉了
貼代碼
//三個公用方法
//添加cookie
function addCookie(objName, objValue, objHours) {
var str = objName + "=" + escape(objValue);
if (objHours > 0) { //為0時不設定過期時間,瀏覽器關閉時cookie自動消失
var date = new Date();
var ms = objHours * 3600 * 1000;
date.setTime(date.getTime() + ms);
str += "; expires=" + date.toGMTString();
}
document.cookie = str + "; path=/";
}
//修改cookie
function SetCookie(c_name, value, expiredays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + expiredays);
document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + "; path=/";
}
//取cookies函數(shù)
function getCookie(name) {
var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
if (arr != null) return unescape(arr[2]); return null;
}
//頁面腳本中用到的地方譬挚,下面的 #now_date1 的 value 是服務器獲取的當前的百度時間 供 JS 調用
var nowDate = $('#now_date1').val();//服務器當前時間
//增加彈窗 cookie
this.addpopupcookie = function () {
var _me = this;
var start = new Date(nowDate);
var end = new Date('2018/1/2');
if (start < end) {
var cookiestr = getCookie('popuptoogle');
if (!cookiestr) {
var date = start.getDate() + '';
var hours = parseInt((end - start) / 1000 / 3600);
addCookie('popuptoogle', date, hours);
$('.lay-popup5').show();
} else if (parseInt(cookiestr) <= start.getDate()) {
$('.lay-popup5').show();
}
}
return _me;
};
//公用的關閉彈窗
this.closelaypopup = function (e) {
var _me = this;
//console.log(e.target.parentNode.parentNode.parentNode);
if (e != null && getCookie('popuptoogle')) {
if ($(e.target.parentNode.parentNode.parentNode).hasClass('lay-popup5')) {
var now = new Date(nowDate);
var date = now.getDate() + 1 + '';
var days = parseInt((new Date('2018/1/2') - now) / 1000 / 3600 / 24);
SetCookie('popuptoogle', date, days);
}
}
$('#lay-popup-bg,.lay-popup').hide();
_me.ioslayclosepopup();
return _me;
};