时间戳

首页 > 解决方案 > 如何在特定时间无交互后显示弹出窗口

javascript - 如何在特定时间无交互后显示弹出窗口

问题描述

当页面打开时，我想在 2 分钟后在该页面中显示一个弹出窗口。在同一页面中，我有 3 个按钮。当我在不到 2 分钟的时间内重新访问该页面并单击要重置计时器的任何一个按钮时。请参阅下面的说明。

  1. 我有index.html。在那个页面中，我有 3 个按钮button1，例如button2和button 3。

  2. 如果用户在 2 分钟内未单击该页面中的任何按钮，则会出现弹出消息“您的时间已经结束”。

  3. 如果用户在 2 分钟内单击任何按钮，则计时器应重置为 0。

谁能帮帮我吗？我尝试了不同的代码，但它没有用。

标签： javascriptjqueryhtmlasp.nettwitter-bootstrap-3

解决方案

您可以使用setTimeout和取消超时clearTimeout，例如：

var resetButton =$('#resetButton')[0],timerId;

function timerExpired() {
    alert('Timer expired');
}

$(resetButton).click(function() {
    clearTimeout(timerId);
    timerId = setTimeout(timerExpired, 5000);
}).triggerHandler('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<button id="resetButton">Reset</button>
</body>

推荐阅读