使用倒数计时器自动刷新页面

Question

我有一个小的 C# 代码用于在 15 秒后刷新网络表单页面 (form.aspx)，如下所示：

lblMessage.Text = "<b><h2>Thank you!</h2></b></br>We will be right with you.<br><br><br>(This page will be refreshed automatically after 15 seconds)";
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Success!", "setInterval(function(){location.href='/form.aspx';},15000);", true);

现在页面将在 15 秒后刷新。我如何让计时器每秒倒计时？即 15 => 14 => 13 => ... 1 然后刷新，这样对用户来说会更好，他们会知道页面发生了什么...

Answer 1

"<b><h2>Thank you!</h2></b></br>We will be right with you.<br><br><br>(This page will be refreshed automatically after <span id='counter'>15</span> seconds)"

ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "Success!", "setTimeout(function(){location.href='/form.aspx';},15000); counter = 15; setInterval(function(){counter--; document.getElementById('counter').innerHTML = counter;},1000);", true);

应该做。

如果在刷新消息号两边加上span和idcounter。

然后我添加了 counter = 15; 以初始化默认值 15。另一个 setInterval 到每秒触发的脚本块。每次通过它都会从 counter 中减去一个，并用新的计数器值更新 span。用户现在应该看到页面倒计时。我还将第一个 setInterval 更改为 setTimout，因为它在技术上是超时，而不是应该每 15 秒发生一次的间隔。

Answer 2

在 javascript 我会选择这样的东西。

<div id='countdown'></div.

var countDown = 15;

function countdown() {
    setInterval(function () {
        if (countDown == 0) {
            return;
        }
        countDown--;
        document.getElementById('countdown').innerHTML = countDown;
        return countDown;
    }, 1000);
}

countdown();

Fiddle: http://jsfiddle.net/chzzcosy/

使用倒数计时器自动刷新页面

Auto refresh a page with count down time

javascript

c#

asp.net

timer

updatepanel