我使用下面的代碼使計時器倒計時，控制臺日志運行良好（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>
我該如何解決這個問題！？
uj5u.com熱心網友回復：
好的，這里的問題是，如果您查看（使用）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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487067.html
標籤：javascript 网 网络表格