將ASP.net AJAX計時器與javascript倒計時相結合

Question

我目前正在將vb.net winforms程序移植到基於Web的版本上，並且原始程序中的功能之一已無法使用。

在原始程序中，每5分鍾會彈出一個表格供用戶輸入。 主窗體上還有一個標簽控件，該控件倒計時到下一個彈出窗口。 這是通過持續時間為1秒的單個計時器控件完成的。 每一個刻度，它都會遞減倒數，當倒數到0時，它會彈出表格，然后重置。 很簡單，但是在我的Web應用程序中，我無法承受每秒進行一次回發的麻煩，因此，我試圖將javascript倒計時小部件與AJAX計時器結合使用。 本質上，應該發生的是，當頁面加載時，倒計時從300秒開始遞減，而AJAX計時器以300秒的持續時間開始。 我的想法是，當計時器計時時，它將運行我的功能，並將計時倒數再次重置為300秒。

我的問題是，我無法使用自己擁有的代碼來重置倒數計時，並且我知道自己做錯了一些事情（可能非常簡單），但是我對Java的了解不足。

如果我將Timer變量硬編碼為300，則倒計時有效，並且計時器會計時（觸發其他功能），但倒計時只會繼續遞減計數（為負數）。 如何從后面的代碼中重置倒數計時變量？

這是倒計時功能

    var Timer = <%= CountDown %>;

    function updateClock() {

        // Update Countdown
        Timer -= 1;
        var TimerMin = Math.floor(Timer / 60);
        var TimerSec = Timer - (TimerMin * 60);
        TimerSec = (TimerSec < 10 ? "0" : "") + TimerSec;
        var TimerFormat = TimerMin + ":" + TimerSec;

        // Update the countdown display
        document.getElementById("javaCountdown").firstChild.nodeValue = TimerFormat
    }

這是機構代碼

<body onload="updateClock(); setInterval('updateClock()', 1000 )">

和背后的代碼

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Countdown = 300
End Sub

PProtected Sub Timer1_Tick(ByVal sender As Object, ByVal e As EventArgs) Handles Timer1.Tick
    Countdown = 300
    'Additional Functions
End Sub

Answer 1

此解決方案使用jQuery。

<script>

    var intervalSecond = null;
    var interval5minutes = null;

    $(document).ready(function() {

      // enable both intervals
      enableIntervals();

      // onsubmit event for your form
      $("#popupForm").submit(function() {

         // hide the form again
         $("#popupForm").css("display", "none");

         // enable intervals again.
         enableIntervals();
      });
    });

    function enableIntervals() {

      // every second interval
      intervalSecond = setInterval(function() {
        $("#updateMeEverySecond").html(new Date());
      }, 1000);

      // every 5 minutes interval
      interval5minutes = setInterval(function() {

        // display form and shut off the interval timers
        $("#popupForm").css("display", "block");
        clearInterval(intervalSecond);
        clearInterval(interval5minutes);
      }, 5 * 60 * 1000);
    }


</script>

<div id="popupForm" style="display:none;">
  <form>
    <input type="text" />
  </form>
</div>
<label id="updateMeEverySecond">Test</label>

將ASP.net AJAX計時器與javascript倒計時相結合

問題描述

1 個解決方案

解決方案1
0 2012-10-16 21:32:24

將ASP.net AJAX計時器與javascript倒計時相結合

問題描述

1 個解決方案

解決方案1 0 2012-10-16 21:32:24

解決方案1
0 2012-10-16 21:32:24