gpt4 book ai didi

javascript - javascript(ASP.Net)中的计时器倒计时

转载 作者:行者123 更新时间:2023-12-05 04:28:57 25 4
gpt4 key购买 nike

我使用下面的代码使计时器倒计时,控制台日志运行良好 (10,9,8,...) 但我看不到标签上的变化

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function sleep(miliseconds) {
var currentTime = new Date().getTime();
while (currentTime + miliseconds >= new Date().getTime()) {
}
}

function counterDown(count) {
console.log("JLog: ", count);
if (count > 1) {
var lbl = document.getElementById('<%= lblTimer.ClientID %>');
lbl.innerText = count;

sleep(1000);
counterDown(count - 1);
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<br /><br />
<asp:TextBox ID="txtUserName" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:TextBox ID="txtPassword" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:Button runat="server" OnClientClick="counterDown(10);" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--"></asp:Label><br /><br />
</form>
</body>
</html>

编辑

我也使用下面的代码作为答案中的提及,但不起作用。连控制台日志都不行

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--" ClientIDMode="Static"></asp:Label><br /><br />
<script>
var mycount = 0
var myTimer
function start(count) {
mycount = count
$('#lblTimer').text(count)
myTimer = setInterval(MyTick, 1000)
}

function MyTick() {
mycount = mycount - 1
$('#lblTimer').text(mycount)
if (mycount <= 0) {
clearInterval(myTimer)
}
console.log("JLog: ", mycount);
}
</script>
</form>
</body>
</html>

我该如何解决这个问题!?

最佳答案

好的,这里的问题是如果您查看(使用)f12 调试工具,您确实会在日志中看到倒计时。然而,(令人难过的是网络上有无数的例子),他们没有提到网络屏幕更新和显示在例程退出之前不会更新。当 js 例程完成后,屏幕会更新以开始工作。换句话说,当标签被更新时,它不会更新浏览器中的显示,直到例程完成。并且在 js 代码中没有可用的“执行事件”或命令来表示请更新(显示)浏览器的未决更新。

因此,您需要编写一个更新标签的例程,然后完成!!!

所以,你需要这样做:

    <asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--" ClientIDMode="Static"></asp:Label><br /><br />

<script>
var mycount = 0
var myTimer
function start(count) {
mycount = count
$('#lblTimer').text(count)
myTimer = setInterval(MyTick, 1000)
}

function MyTick() {
mycount = mycount - 1
$('#lblTimer').text(mycount)
if (mycount <= 0) {
clearInterval(myTimer)
}
}
</script>

另请注意,这实际上使代码异步。这意味着例程 start(10) 不会等待,因此您不会例如“推迟”或让该按钮运行的服务器端代码(如果有的话)。

如果需要等待 10 秒,然后运行服务器端代码,那么我们必须添加到上面的代码才能工作。由于 start() 例程现在不等待,该按钮的任何服务器端代码事件也不会等待(它将在按钮单击时运行。)。如前所述,询问您是否有该按钮的代码,并且您需要(想要)附加到该按钮的服务器端事件代码在按钮单击(服务器端代码背后)运行之前等待 10 秒。

示例 2:请注意,如上所述 - 浏览器 js 代码在代码(调用的例程)退出并完成之前不会更新控件!因此,我们必须使用 settimer - 这会使例程退出,并且每 1 秒被调用一次。 js 代码因此变得异步,并允许更新控件。

所以,试试这个:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script>
var mycount = 0
var myTimer
function start(count) {
mycount = count
var myLable = document.getElementById('<%= lblTimer.ClientID %>');
myLable.innerText = mycount
myTimer = setInterval(MyTick, 1000)
}

function MyTick() {
mycount = mycount - 1
var myLable = document.getElementById('<%= lblTimer.ClientID %>');
myLable.innerText = mycount

if (mycount <= 0) {
clearInterval(myTimer)
}
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div>

<asp:TextBox ID="txtUserName" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:TextBox ID="txtPassword" runat="server" Height="20px" Width="120px"></asp:TextBox><br /><br />
<asp:Button runat="server" OnClientClick="start(10);return false;" Text="Start Timer" />
<br /><br />
<asp:Label runat="server" id="lblTimer" Text="--"></asp:Label><br /><br />

</div>
</form>
</body>
</html>

关于javascript - javascript(ASP.Net)中的计时器倒计时,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/72456606/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com