如何使数字每秒倒计时答案

【问题标题】：How to make number to be counting down each second如何使数字每秒倒计时
【发布时间】：2015-04-21 14:44:42
【问题描述】：

我有这个代码来完成这个任务：如果用户在 10 秒内没有任何活动（鼠标移动和按键），则显示一个对话框（Jquery UI 对话框）来警告并让用户知道他们将在下一个页面被重定向到另一个页面5秒，除非他们做某事。如何在“您将在 5 秒后自动重定向到...”中设置“5”。倒计时为 5, 4, 3, 2, 1 => 然后重定向？

<script>
        // Set timeout variables.
        var timoutWarning = 10000; // Display warning in 10 seconds.
        var timoutNow = 15000; // Timeout in 15 seconds
        var logoutUrl = 'http://google.com'; // URL to redirect to.

        var warningTimer;
        var timeoutTimer;

        // Start timers.
        function StartTimers() {
            warningTimer = setTimeout("IdleWarning()", timoutWarning);
            timeoutTimer = setTimeout("IdleTimeout()", timoutNow);
        }

        // Reset timers.
        function ResetTimers() {
            clearTimeout(warningTimer);
            clearTimeout(timeoutTimer);
            StartTimers();
            $("#timeout").dialog('close');
        }

        // Show idle timeout warning dialog.
        function IdleWarning() {
            $("#timeout").dialog({
                modal: true
            });            
        }

        // redirect the user.
        function IdleTimeout() {
            window.location = logoutUrl;
        }       

    </script>

html

<style>
    #timeout {
        display: none;
    }
</style>
<body onload="StartTimers();" onmousemove="ResetTimers();" onclick="ResetTimers();">
<form id="form1" runat="server" defaultbutton="DoNothing">
    <asp:Button ID="DoNothing" runat="server" Enabled="false" Style="display: none;" />
    <div class="page-container">
        <div class="container">

            Hold your mouse and don't press any key for 10 seconds, an dialog alert will be displayed.
            <div id="timeout">
                <h1>Session About To Timeout</h1>
                <p>
                    You will be automatically redirected to google after 5 seconds.<br />
                    To stay on this page move your mouse or press any key.
                </p>
            </div>

        </div>
    </div>
</form>

【问题讨论】：

你指的是段落中的“5”吗？（“您将在 5 秒后自动重定向到 Google。”）
你的页面有几个错误：Error: cannot call methods on dialog prior to initialization; attempted to call method 'close'
@Shaggy 是的，这就是我提到的 5 个。

标签： javascript jquery asp.net jquery-ui

【解决方案1】：

Vano 对 jQuery 插件的建议很好，没有理由不使用它。不过，如果你想自己做，代码应该很简单：

var timer = -1; //so the timer doesn't start until everything is rendered

setInterval(function() {
    timer--;
    if (!timer) {
        window.location = logoutUrl;
    } else if (timer <= 5) {
        $('#timeout').html("Redirecting in " + timer + " seconds");        
    }
}, 1000);

$(document).on('ready keypress mousemove focus click scroll', function() {
    timer = 15;
});

工作示例：http://jsfiddle.net/jvvgepo4/

【讨论】：

我很想使用该插件，但问题正如我在他的回答中评论的那样，它只提供了通过单击按钮继续停留的选项，当用户移动鼠标/单击鼠标或使用键盘他们也可以留下来。您的代码很简单并且效果更好，它还避免了<body onload="StartTimers();" onmousemove="ResetTimers();" onclick="ResetTimers();"> => 这使得ResetTimers() 在第一次出现 JqueryUI 对话框后停止工作，这意味着无论您做什么，对话框都会在 10 秒后继续出现。
$(document).on('ready keypress mousemove focus', 是做什么的，if (!timer) 是什么意思？
另一个问题，时间到了，页面不会立即重定向，而是先关闭JqueryUI对话框然后重定向，如何在对话框仍然打开时使其按时重定向（像这样：erichynds.com/examples/jquery-idle-timeout/example-dialog.htm)?
这意味着计时器在页面加载时启动（ready），每次有人按下按钮（keypress），移动鼠标（mousemove）或选择一个表单字段 (focus)。 focus 可能是多余的，但它不应该伤害任何东西。我只是不确定这将如何在移动设备上捕获触摸事件。您可能想在手机上对其进行测试，并添加更多事件。
window.location = logoutUrl 应该让它立即重定向。这没有发生吗？顺便说一句，我编辑了事件列表以包括click 和scroll。再一次，可能是多余的，但不会受到伤害。

【解决方案2】：

您可以使用jquery-idleTimeout

这里是demo

使用示例：

 $(document).ready(function(){
           $(document).idleTimeout({
             inactivity: 10000, 
             noconfirm: 5000,
             dialogTitle: 'title',
             dialogText: 'warning text',
             redirect_url: 'http://google.com',
           });
          });

编辑：

要添加倒计时功能，可以使用jquery-idle-timeout

它有 onCountdown 事件。 Here 是工作示例。

【讨论】：

它如何确定何时“超时”，是否包括鼠标移动和按键/按钮按下？
是的，它跟踪鼠标和键盘。
我刚刚看到演示，做得很好但是看到了，但我没有看到在重定向前倒计时剩余秒数的选项，这就是我问这个问题的原因:(
这里是演示：erichynds.com/examples/jquery-idle-timeout/example-dialog.htm
非常好的插件，现在我只想坚持我的功能，因为在你给我看的插件上，用户必须点击按钮才能继续停留，但我希望用户可以移动鼠标或按任何东西=>警报消失，它们又回来了。知道如何使代码上的倒计时数字起作用吗？