我使用下面的代码使计时器倒计时，控制台日志运行良好 (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 秒。
所以，试试这个:
<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>
https://stackoverflow.com/questions/72456606/
相关文章：
unity3d - Unity Microgame WebGL 上传不工作(500 内部服务器)
flutter - 如何更新 flutterfire_web_sdk_version 以及如何启用
sql - 从现有表创建 BigQuery 表，包括 _PARTITIONTIME
wordpress - 如何使用 WordPress Multisite 重定向特定站点的主页
java - 如何使用二维指针通过 JNA 调用 C 函数？
javascript - 未捕获的类型错误 : Failed to resolve module s
python - 根据另一个 df 中的列计算一个 df 中的行数