文章内容
2023/2/8 15:00:35,作 者: 黄兵
页面跳转提示
最近需要实现一个需求：如果某个页面（验证）用户10s钟还没有跳转，则 <p class="hint"></p> 的内容变成：网络存在问题（不稳定），请更换网络环境。
下面是通过 JavaScript 具体的一个实现示例：
if (window.location.pathname === "/verify") {
let timer = setTimeout(function() {
let hint = document.querySelector(".hint");
hint.innerText = "当前网络可能不稳定，请更换网络重试。";
}, 10000);
// 如果页面在 10 秒内跳转，则清除定时器
window.addEventListener("beforeunload", function() {
clearTimeout(timer);
});
}在这段代码中，我们使用 window.location.pathname 获取当前 URL 的路径，并使用 if 语句判断是否为 /verify 页面。如果是，则使用 setTimeout 函数设置了一个 10 秒的定时器。如果在 10 秒内页面未跳转，则使用 document.querySelector 函数获取 .hint 元素并修改其文本内容。然后，使用 beforeunload 事件监听页面是否跳转，如果页面跳转，则清除定时器。
评论列表