如何实现用户访问5个页面或在网站停留2分钟时自动触发弹窗展示

你原有代码仅实现了访问页数触发逻辑，缺少累计停留时长的统计逻辑，以下是完整修复后的代码：

var popup = '<div class="popup-cover" id="sub-popup">';
            popup += '<div id="subscribe-popup" class="popup">';
            popup += '<a class="close" onclick="closePopup()">&times;</a>';
            popup += '<h1 class="sub-title">Subscribe here!</h1>';
            popup += '<p class="sub-txt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>'
            popup += '<a class="btn sub-btn btn-nature" onclick="hidePopup()">Subscribe</a>';
            popup += '</div>';
            popup += '</div>';

function closePopup() {
    $('#sub-popup').remove();
    localStorage.setItem('displayPopup', '0');
}

function hidePopup() {
    $('#sub-popup').remove();
    localStorage.setItem('displayPopup', '0');
    window.open("https://upesy.us17.list-manage.com/subscribe/post?u=4f67f99a5b6bf0f744449df73&id=45f50ab267", "_blank");
}

// 公共方法：判断是否需要弹出弹窗
function shouldShowPopup() {
    // 已经关闭过弹窗就永远不弹出
    if (localStorage.getItem('displayPopup') === '0') return false;
    return true;
}

// 公共方法：渲染弹窗
function renderPopup() {
    if (!shouldShowPopup()) return;
    $(document.body).append(popup);
    // 弹出后重置访问计数
    const expdate = new Date();
    expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
    SetCookie("upesy-cookie", 0, expdate, "/", null, false);
    // 标记已经弹出过，防止重复触发
    localStorage.setItem('displayPopup', '0');
}

jQuery(document).ready(function($) {
    // 先初始化displayPopup的初始值，如果没存过默认是允许弹出
    if (!localStorage.getItem('displayPopup')) {
        localStorage.setItem('displayPopup', '1');
    }

    // -------------原有Cookie操作方法保留-------------
    function getCookieVal(offset) {
        var endstr = document.cookie.indexOf(";", offset);
        if (endstr == -1)
            endstr = document.cookie.length;
        return unescape(document.cookie.substring(offset, endstr));
    }

    function GetCookie(name) {
        var arg = name + "=";
        var alen = arg.length;
        var clen = document.cookie.length;
        var i = 0;
        while (i < clen) {
            var j = i + alen;
            if (document.cookie.substring(i, j) == arg)
                return getCookieVal(j);
            i = document.cookie.indexOf(" ", i) + 1;
            if (i == 0)
                break;
        }
        return null;
    }

    function SetCookie(name, value) {
        var argv = SetCookie.arguments;
        var argc = SetCookie.arguments.length;
        var expires = (2 < argc) ? argv[2] : null;
        var path = (3 < argc) ? argv[3] : null;
        var domain = (4 < argc) ? argv[4] : null;
        var secure = (5 < argc) ? argv[5] : false;
        document.cookie = name + "=" + escape(value) +
            ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
            ((path == null) ? "" : ("; path=" + path)) +
            ((domain == null) ? "" : ("; domain=" + domain)) +
            ((secure == true) ? "; secure" : "");
    }

    // -------------页面访问计数触发逻辑-------------
    function handleVisitCount() {
        var expdate = new Date();
        var visit;
        expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365));
        if (!(visit = GetCookie("upesy-cookie")))
            visit = 0;
        visit++;

        SetCookie("upesy-cookie", visit, expdate, "/", null, false);
        
        if (visit >= 5) {
            if(shouldShowPopup()) {
                setTimeout(function(){
                    renderPopup();
                }, 2000);
            }
        }
    }
    
    // -------------累计停留时长触发逻辑-------------
    function handleStayDuration() {
        if (!shouldShowPopup()) return;
        // 每次页面加载时记录进入时间
        var pageEnterTime = Date.now();
        // 读取之前累计的停留时长，默认0
        var totalStay = parseInt(localStorage.getItem('totalStay') || '0');

        // 每10秒同步一次当前页面停留时长到localStorage
        var syncTimer = setInterval(function() {
            if (!shouldShowPopup()) {
                clearInterval(syncTimer);
                return;
            }
            var currentStay = Math.floor((Date.now() - pageEnterTime) / 1000);
            var newTotal = totalStay + currentStay;
            localStorage.setItem('totalStay', newTotal.toString());
            // 累计满2分钟（120秒）就弹出
            if (newTotal >= 120) {
                renderPopup();
                clearInterval(syncTimer);
            }
        }, 10000);

        // 页面离开前同步最后一次停留时长
        window.addEventListener('beforeunload', function() {
            var currentStay = Math.floor((Date.now() - pageEnterTime) / 1000);
            var newTotal = totalStay + currentStay;
            localStorage.setItem('totalStay', newTotal.toString());
        });
    }

    // 页面加载完成后同时启动两个触发逻辑
    $(window).on("load", function() {
        handleVisitCount();
        handleStayDuration();
    });

});

核心修改说明 #

• 统一了localStorage的存取方式，使用标准的setItem/getItem方法，避免隐式类型转换导致的判断失效问题
• 新增了累计停留时长统计逻辑：每10秒同步当前页面停留时长到localStorage，跨页面累计总时长，满120秒自动触发弹窗
• 新增了统一的弹窗触发判断逻辑，两个触发条件共用一套弹窗权限校验，只要关闭过弹窗就永远不会再弹出
• 修正了原有的页数判断逻辑，原代码判断visit >=4实际是第5次访问触发，现在调整为visit>=5和需求描述保持一致

内容的提问来源于stack exchange，提问作者ZiaUllahZia