在不使用Form标签的情况下将秒表放在页面上

本文关键字：情况下 Form 标签 | 更新日期: 2023-09-27 18:02:56

我发现的几个例子需要一个Form标签，这似乎不能很好地与我现有的应用程序。

我需要做的是在我的页面上添加一个计时器，当一个按钮被按下时开始计数，当另一个按钮被按下时停止计数。这些按钮将位于秒表所在的UpdatePanel之外。

这可以用Java做吗?我找到了这个似乎很有希望，但行不通的答案:

如何创建秒表计时器

它似乎不喜欢tm1_Tick函数的第一行，因为它认为sw是NULL。

任何示例代码或指导将不胜感激。

在不使用Form标签的情况下将秒表放在页面上

我发现有几个例子需要一个Form标签

因为它们是ASP。. NET WebForms(就像你链接到的:许多服务器控件的命名空间标签"asp")

为什么不在JavaScript中做呢?在任何事件上记录时间，然后使用setTimeout不时地更新页面内容。

(注意Java (Sun和Oracle的跨平台语言)和JavaScript(与浏览器深度集成的脚本语言)之间唯一的共同点是它们的头四个字母。)

我想你的意思是"JavaScript"。客户端解决方案可以很好地使用JS。

在网上找到的，很好的例子(免责声明，这不是我的代码):

http://jsfiddle.net/oukjfavu/

var h1 = document.getElementsByTagName('h1')[0],
    start = document.getElementById('start'),
    stop = document.getElementById('stop'),
    clear = document.getElementById('clear'),
    seconds = 0, minutes = 0, hours = 0,
    t;
function add() {
    seconds++;
    if (seconds >= 60) {
        seconds = 0;
        minutes++;
        if (minutes >= 60) {
            minutes = 0;
            hours++;
        }
    }
    h1.textContent = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);
    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}
timer();

/* Start button */
start.onclick = timer;
/* Stop button */
stop.onclick = function() {
    clearTimeout(t);
}
/* Clear button */
clear.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

我把这个作为一个答案是为了完全清楚，但它是基于贾米森的回答。最终的结果是添加以下Javascript:

<script type = "text/javascript">
    /* Stop, Clear and Pause the timer displayed under the pause buttons  */
    var h1 = document.getElementsByTagName('h1')[0],
        start = document.getElementById('start'),
        stop = document.getElementById('stop'),
        clear = document.getElementById('clear'),
        seconds = 0, minutes = 0, hours = 0,
        t;
    function add() {
        seconds++;
        if (seconds >= 60) {
            seconds = 0;
            minutes++;
            if (minutes >= 60) {
                minutes = 0;
                hours++;
            }
        }
        document.getElementById('<%=h1.ClientID%>').innerText = (hours ? (hours > 9 ? hours : "0" + hours) : "00") + ":" + (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") + ":" + (seconds > 9 ? seconds : "0" + seconds);;
        timer();
    }
    function timer() {
        t = setTimeout(add, 1000);
    }
    function stp() {
        clearTimeout(t);
    }
    function clr() {
        document.getElementById('<%=h1.ClientID%>').innerText = "00:00:00";
        seconds = 0; minutes = 0; hours = 0;  
    }
</script>

ASP。您需要添加的最后一段是:

 <asp:UpdatePanel ID="UpdatePanel4" runat="server">
     <ContentTemplate>
         <table style="width:132px; margin-left:13px">
             <tr>
                 <td style="text-align:center; margin-left:2px; border:double; background-color:darkcyan">
                     <asp:Label ID="h1" runat="server" ForeColor="White"><time>00:00:00</time></asp:Label>
                 </td>
             </tr>
         </table>                                    
     </ContentTemplate>
</asp:UpdatePanel>

然后，在我的ASP按钮，我添加了这个:

onclientclick="stp();"

(如果你已经在你的按钮上有一个onclientclick，只是用分号分开，你可以在一个onclientclick中有多个函数)

然后我需要将它添加到代码后面的几个位置:

ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "script", "stp()", true);
ScriptManager.RegisterClientScriptBlock(UpdatePanel4, this.GetType(), "script", "clr()", true);

最后一段可能是必要的，也可能不是，这取决于你在做什么。

如果我正确理解你的问题，你可以在JavaScript中创建自己的倒计时计时器，然后对你的更新面板进行AJAX调用。

下面是一个纯JS倒计时的简短示例:

var start = document.getElementById("start");
start.addEventListener("click", function() {
  var interval = setInterval(function() {
    var watch = document.getElementById("watch");
    var value = watch.value - 1;
    watch.value = value;
    if (value <= 0)
      clearInterval(interval);
  }, 1000);
});
<input id="watch" value="10" />
<input id="start" type="button" value="start" />

相关文章：