• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

一个简单的ASP.NET的进度条控件

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

一个简单的ASP.NET进度条控件:

(1)创建 一个ID="Button1"的BUTTON控件 和 一个ID="LAY1"的DIV控件

<asp:Button ID="Button1" runat="server" Text="Button" /><br />
        <DIV >
        <FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT><FONT face="宋体"></FONT><br>
        <b><font color="#800080" size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;正在检索数据,请稍候...</font></b>
        <table align="center" style="width: 78px; height: 25px">
             <tr>
                 <td style="width: 56px; height: 27px;">
                     <div style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid; width: 88px;" >
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                            <span >&nbsp;</span>
                      </div>
                  </td>
              </tr>
          </table>
      </Div>

 

(2)写javascript脚本

<script language="javascript" type='text/javascript'>

    var progressEnd = 15;  // set to number of progress <span>'s.
    var progressColor = 'green'; // set to progress bar color
    var progressInterval = 300; // set to time between updates (milli-seconds)
    var progressAt = progressEnd;
    var progressTimer;
//Button1的onClick事件 触发 progress_update()
function progress_update()
{
     progressAt++;
     if (progressAt > progressEnd)
     {
        progress_clear();
        progressAt=1;
     }
     document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
     progressTimer = setTimeout('progress_update()',progressInterval);
}
//Button1的onClick事件即将完成 触发 progress_stop()
function progress_stop()
{
     clearTimeout(progressTimer);
     progress_clear();
}
function progress_clear()
{
    for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
    progressAt = 0;
}
</script>

 

(3)编写后台代码

'页面初始化时 为按钮绑定状态与事件
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not Me.IsPostBack Then
            Button1.Attributes.Add("onClick", "Lay1.style.visibility='';progress_update();")
        End If
    End Sub

 '设置按钮的属性
    Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click
        MsgBox("here it is")
        Me.scriptjdt(Me, "Lay1.style.visibility='hidder';progress_stop();")
    End Sub

 '通过 Me.ClientScript.RegisterStartupScript 注册javascript脚本
    Public Sub scriptjdt(ByVal objPage As System.Web.UI.Page, ByVal strValue As String)
        Dim jb As String
        jb = "<script language='javascript' type='text/javascript'>" + strValue + "</script>"

        objPage.ClientScript.RegisterStartupScript(Me.GetType(), "jdt_ok", jb)

        ‘objPage.RegisterStartupScript("jdt_ok", jb)
    End Sub


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
ASP.NET 页面生命周期发布时间:2022-07-10
下一篇:
ASP.NET新建解决方案和网站发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap