2012-10-16 41 views
0

我目前正在將一個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 
+0

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

+0

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

+0

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

回答

0

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