同时使用 javascript 函数与 asp:Timer

Using javascript function at the same time with asp:Timer

本文关键字：asp Timer 函数 javascript      更新时间：2024-01-16
<p><b> Completed: <asp:Label ID="completedPercentageLabel" runat="server"></asp:Label>%</b></p>    
<script>
        function updateBar()
        {
            var bar = document.getElementById("CompletionBar");
            var width = document.getElementById("completedPercentageLabel").innerText;
            bar.style.width = width + '%';
            document.getElementById("Percentage").innerHTML = width + '%';
        }
        setInterval(updateBar, 1000);
    </script>
    <asp:Timer ID="Timer1" runat="server" Interval="60000"></asp:Timer>

我想问你，怎么可能每分钟更新一次我的加载栏，每当计时器说要更新并且根本不显示标签时。我试图找到一种方法将"width"变量链接到asp，使其遵守与标签相同的规则，但没有取得多大成功。

提前谢谢。

如果您想

使用计时器控件asp.net更好的选择是使用更新面板并在服务器端执行所有操作，例如：

<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
    </Triggers>
    <ContentTemplate>
        <p id="CompletionBar" runat="server"></p>
        <p><b> Completed: 
          <asp:Label ID="completedPercentageLabel" runat="server"></asp:Label>%
        </b></p>
    </ContentTemplate>
</asp:UpdatePanel>

<asp:Timer ID="Timer1" runat="server" Interval="60000" OnTick="timer_tick"></asp:Timer>

然后在服务器端处理程序上：

protected void Timer1_Tick(object sender, EventArgs e)
{
    completedPercentageLabel.Text = <NEW VALUE>;
    CompletionBar.Style.Add("width","<NEW VALUE>px");
}

有关详细信息，请参阅此 MSDN 页面。

您可以使用

asp:HiddenField来存储进度。然后，您不必显示它。

制作自己的进度条的另一种方法是使用 HTML5 progress 元素。您可以在此处阅读有关它的更多信息：http://www.w3schools.com/TAgs/tag_progress.asp

相关文章：