JS+Cookie制作会员每天登陆首次弹出提示框/通知弹窗实例代码

当用户访问我们网站的时候通过弹窗提示最新优惠信息或者公告更新通知等，站长们都知道弹窗的作用很大但是需要慎用，因为会被当成广告容易引起用户反感…

上次发布了免费分享最新网页版会员领取优惠券/公告提醒特效弹窗代码纯HTML+CSS的模板，没有做JS和cookie识别，很多新手可能不会使用！

本期分享JS+Cookie制作会员每天登陆首次弹出提示框/通知弹窗实例代码：

JS实现代码开始：

1、首先需要设置Cookie

// 设置Cookie
function setCookie(name, value, expires) {
var date = new Date();
date.setTime(date.getTime() + expires * 24 * 60 * 60 * 1000);
var expires = “expires=” + date.toUTCString();
document.cookie = name + “=” + value + “;” + expires + “;path=/”;
}

2、获取Cookie

// 获取Cookie
function getCookie(name) {
var cookieName = name + “=”;
var cookies = document.cookie.split(‘;’);
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
if (cookie.indexOf(cookieName) == 0) {
return cookie.substring(cookieName.length, cookie.length);
}
}
return “”;
}

3、检查Cookie

// 检查Cookie
function checkCookie(name) {
var cookie = getCookie(name);
if (cookie != “”) {
return true;
} else {
return false;
}
}

4、弹出提示框

// 弹出提示框
function showPrompt() {
var prompt = confirm(“欢迎来到洽单资源库！”);
if (prompt == true) {
setCookie(“www.goww.net”, “visited”, 1); // 设置Cookie，1天过期
}
}

5、控制弹出时机

// 控制弹出时机
window.onload = function() {
if (!checkCookie(“www.goww.net”)) { // 如果Cookie不存在
setTimeout(showPrompt, 3000); // 延迟3秒弹出提示框
}
};

弹窗代码原理：

设置了一个名为“www.goww.net”的Cookie，其内容为“visited”，代表用户已经访问过该网站，同时该Cookie的过期时间为1天。在页面加载完成后，我们调用checkCookie()函数来检查Cookie是否存在，如果不存在，则调用setTimeout()函数来延迟弹出提示框，showPrompt()函数用于弹出提示框并设置Cookie。

以上就是使用JS+Cookie实现定时提示和弹出功能的详细示例代码，希望对您有所帮助！