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

我目前正在將一個vb.net winforms程序移植到一個基於web的版本，並且原始程序中的其中一個功能已經難倒了。將ASP.net AJAX計時器與javascript倒計時相結合

在原始程序中，每隔5分鐘會彈出一個窗體供用戶輸入。主窗體上還有一個標籤控件，可以倒數到下一個彈出窗口。這是通過一個持續時間爲1秒的單個定時器控制來完成的。每次滴答，減少倒計時，當倒計數達到0時，它彈出窗體並重置。很簡單，但在我的網絡應用程序中，我不能每秒都做一次回發，所以我試圖將一個JavaScript倒數小部件與AJAX計時器結合在一起。本質上，應該發生的是當頁面加載時，倒計時從300秒開始遞減，並且AJAX計時器以300秒的持續時間開始。我的想法是，當計時器滴答時，它會運行我的功能，並重新將倒計時重置爲300秒。

我的問題是，我無法用我有的代碼重置倒計時，並且我知道我正在做一些事情（可能非常簡單）錯誤，但是我不知道足夠的Java知道什麼。

如果我將Timer var硬編碼爲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

來源

2012-10-16 scholzr

如果我問，這個東西每5分鐘出現一次的目的是什麼？用戶需要什麼輸入以及爲什麼每5分鐘需要一次？這看起來沒什麼關係，但是這個來自網絡應用程序的方法似乎很混亂，也許還有更好的方法來完成它。 – Snuffleupagus

這是一個麻醉監測程序。每5分鐘彈出一次提示用戶輸入病人的生命體徵。 webapp上的「彈出」是一個模式彈出窗口。這不是可談判的。這是該程序的工作原理。 – scholzr

我爲你設置了一個循環定時器的例子，希望這應該有所幫助。 http://jsfiddle.net/yVUg8/2/ – Snuffleupagus

該解決方案使用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>

來源

2012-10-16 21:32:24 sonjz

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

回答

相關問題