结合ASP.net AJAX计时器和javascript倒计时
结合ASP.net AJAX计时器和javascript倒计时
提问于 2012-10-17 04:12:16
我目前正在致力于将vb.net winforms程序移植到基于web的版本，而原始程序中的一个函数已经被难住了。
在最初的程序中，每隔5分钟就会弹出一个表单，供用户输入。在主窗体上还有一个label控件，它可以倒计时到下一个弹出窗口。这是通过一个持续时间为1秒的定时器控件来实现的。每一次滴答，它都会递减倒计时，当倒计时到0时，它会弹出表单，然后重置。很简单，但在我的web应用程序中，我不能每秒都做回发，所以我尝试的是将javascript countdown小部件与AJAX计时器结合起来。实际上，当页面加载时，倒计时开始从300秒开始递减，AJAX计时器以300秒的持续时间开始。我的想法是，当计时器滴答作响时，它将运行我的函数，并再次将倒计时重新设置为300秒。
我的问题是，我不能用我拥有的代码重置倒计时，我知道我做错了什么(可能非常简单)，但我对Java的了解不够，不知道是什么。
如果我将计时器变量硬编码为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回答 1
Stack Overflow用户
发布于 2012-10-17 05:32:25
此解决方案使用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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12922672
复制相关文章
相似问题
腾讯云开发者
