显示正在加载及响应时间

显示数据正在加载及响应时间


先来个效果图

想要下面小图片的,请下载(多种选择):http://download.csdn.net/detail/liudong8510/6777533


显示正在加载及响应时间_第1张图片

HTML/Javascript

   var runing = 0;
        var t = 1;
        //按钮客户端事件
        function ShowLoading() {
            document.getElementById("loading").style.display = 'block';
            document.getElementById("btnSave").disabled = true;
            document.getElementById("btnSave").value ="获取中..."+t;
            runing = 1;
            showTime();
        }
        //迭代执行
        function showTime() {
            t++;
            document.getElementById("btnSave").value = "获取中..." + t;
            if (runing != 0) {
                window.setTimeout(showTime, 1000);
            }
            
        }
        //页面加载完成执行
        window.onload = function () {
            runing = 0;
            document.getElementById("loading").style.display = 'none';
            document.getElementById("btnSave").disabled = false;
            document.getElementById("btnSave").value = "获取";
        }
        

    </script>
    <!--Button设置关键属性 UseSubmitBehavior=False 采用ASP.NET 回发机制来触发server端的事件 -->
    <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="获取" OnClientClick="ShowLoading();" UseSubmitBehavior="False" />
    <!--img设置关键属性 display=none 默认不显示 -->
    <img id="loading" src="\loading2.gif" style="display: none;"/>




你可能感兴趣的:(显示正在加载及响应时间)