当前位置：首页 > JavaScript

js实现定时弹出验证

2026-04-04 18:06:18JavaScript

使用 setTimeout 实现定时弹窗

通过 setTimeout 方法延迟执行弹窗逻辑，适用于单次定时触发场景。

setTimeout(function() {
    alert('请完成验证！');
    // 或调用自定义弹窗组件
    // showCustomModal();
}, 5000); // 5秒后触发

使用 setInterval 实现循环验证

若需周期性弹出验证（如每10分钟一次），可使用 setInterval。

js实现定时弹出验证

const intervalId = setInterval(() => {
    const isConfirmed = confirm('系统需要验证您的身份，是否继续？');
    if (isConfirmed) {
        clearInterval(intervalId); // 用户确认后停止弹窗
    }
}, 600000); // 10分钟 = 600,000毫秒

结合页面活跃状态检测

通过 Page Visibility API 实现在用户返回页面时触发验证，提升用户体验。

js实现定时弹出验证

document.addEventListener('visibilitychange', () => {
    if (!document.hidden) {
        // 页面从后台切换回前台时触发
        const modal = document.createElement('div');
        modal.innerHTML = '<div class="modal">请完成人机验证</div>';
        document.body.appendChild(modal);
    }
});

基于用户操作的延迟验证

在用户长时间无操作后触发验证，需监听鼠标移动和键盘事件。

let idleTimer;
const resetIdleTimer = () => {
    clearTimeout(idleTimer);
    idleTimer = setTimeout(() => {
        console.log('用户长时间未操作，启动验证');
        // 调用验证函数
    }, 1800000); // 30分钟无操作后触发
};

document.addEventListener('mousemove', resetIdleTimer);
document.addEventListener('keypress', resetIdleTimer);

完整示例代码

以下为整合了定时触发和用户交互的完整实现：

<!DOCTYPE html>
<script>
// 定时弹窗验证
function startTimedVerification() {
    setTimeout(() => {
        const modal = document.getElementById('verificationModal');
        modal.style.display = 'block';
    }, 30000); // 30秒后显示
}

// 用户关闭弹窗处理
function closeModal() {
    document.getElementById('verificationModal').style.display = 'none';
}

// 页面加载完成后初始化
window.onload = function() {
    startTimedVerification();
};
</script>

<style>
#verificationModal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 20px;
    background: white;
    border: 1px solid #ccc;
    z-index: 1000;
}
</style>

<div id="verificationModal">
    <h3>安全验证</h3>
    <p>请点击确认以继续浏览</p>
    <button onclick="closeModal()">确认</button>
</div>