WEB应用程序中的进度条

最新推荐文章于 2017-12-29 15:42:00 发布
最新推荐文章于 2017-12-29 15:42:00 发布
阅读量523 收藏
点赞数
分类专栏： 收藏经典资料 文章标签： web javascript div html stylesheet string
WEB 应用程序中的进度条
Julien Cheyssial 写作于2003/10/01
Joise.LI翻译并修改于2004-4-2
 
写在前面：
       原文是我在需要使用进度条时找到的一篇文章，讲解详细并附有实例。我在原文的基础上加上了自己的修改：增加了线程处理并且将进度条的使用放到了子线程中处理。这是我第一次翻译文章，敬请各位指正。原文见于http://www.myblogroll.com/Articles/progressbar/，请对照参考。
 
 
       谁说在WEB应用程序中不能使用进度条？我认为能。本文将介绍在服务端长时间的处理过程中通过使用进度条提高WEB应用程序的质量和界面友好度。事实上，如果一个WEB应用程序一直运行在无状态和无连接状态下，用户很容易认为事情已经结束了。但是本文介绍的不使用任何ActiveX控件和乱七八糟的Java Applets的进度条将有助于改善这点。
 
       在一个WEB应用程序中能够使用进度条的关键是浏览器有能力在所有页面加载完之前显示页面。我们将使用这点特性来有步骤的生成并且发送页面给客户端。首先，我们将使用HTML生成一个完美并且漂亮的进度条，然后我们动态的发送Javascript块以更新进度条。当然，以上的所有内容都是在断开用户请求之前实现的。在C#中，Response.Write允许我们加入自定义内容到缓存区并且Response.Fluse()允许我们把所有缓存区中的内容发送到用户的浏览器上。
 
第一步： 
       第一步让我们来建立一个进度条页面，我们使用 progressbar.aspx。 如上所述，我们逐步生成并发送页面到客户端。首先，我们将使用HTML生成一个完美并且漂亮的进度条。所需要的HTML代码我们可以从事先定义的 progressbar.htm 中获取，所以，第一件事情是装载它并且将数据流发送到客户端的浏览器，在 progressbar.aspx 的 Page_Load 中加入如下几行：
            string strFileName = Path.Combine( Server.MapPath("./include"), "progressbar.htm" );
         StreamReader sr = new StreamReader( strFileName, System.Text.Encoding.Default );
         string strHtml = sr.ReadToEnd();
         Response.Write( strHtml );
         sr.Close();
         Response.Flush();
     以下是 progressbar.htm 的HTML代码，（译注：作者把脚本函数放在了另外一个js文件中，但我嫌麻烦就也放在了这个静态页面中了）
< script language ="javascript">
function setPgb(pgbID, pgbValue)
{ 
     if ( pgbValue <= 100 )
     {
         if (lblObj = document.getElementById(pgbID+'_label'))
         {
              lblObj.innerHTML = pgbValue + '%'; // change the label value
         }
            
         if ( pgbObj = document.getElementById(pgbID) )
         {
              var divChild = pgbObj.children[0];
              pgbObj.children[0].style.width = pgbValue + "%";
         }
         window.status = "数据读取" + pgbValue + "%，请稍候...";
     }
    
     if ( pgbValue == 100 )
         window.status = "数据读取已经完成";
 
}
</ script >
< html >
     <head>
         <linkrel="stylesheet"type="text/css"href="style/common.css"/>
     </head>
     <bodybgColor="buttonface"topmargin="0"leftmargin="0">
          <tablewidth="100%"height="100%"ID="Table1">
              <tr>
                   <tdalign="center"valign="middle">
                       <DIVclass="bi-loading-status"id="proBar"style="DISPLAY: ; LEFT: 425px; TOP: 278px">
                            <DIVclass="text"id="pgbMain_label"align="left"></DIV>
                            <DIVclass="progress-bar"id="pgbMain"align="left">
                                 <DIVSTYLE="WIDTH:10%"></DIV>
                            </DIV>
                       </DIV>
                   </td>
              </tr>
         </table>
     </body>
</ html >
对应的CSS定义如下：
.bi-loading-status {
 /*position:   absolute;*/
 width:        150px;
 padding: 1px;
 overflow: hidden; 
}
 
.bi-loading-status .text {
 white-space: nowrap;
 overflow:     hidden;
 width:             100%;
 text-overflow:     ellipsis;
 padding:      1px;
}
 
.bi-loading-status .progress-bar {
 border:       1px solid ThreeDShadow;
 background:   window;
 height:       10px;
 width:        100%;
 padding: 1px;
 overflow: hidden;
 
}
 
.bi-loading-status .progress-bar div {
 background:   Highlight;
 overflow: hidden;
 height:       100%;
 filter:      Alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=100, FinishY=0);
}
第二步： 
现在我们可以开始更新进度条了，这是十分重要的部分，因为这部分可以令你的进度条活起来。（译注，原来是使用随机的增加15次直到加载完毕，本文仅使用从1-100的匀速增加，以下内容非译）
首先我们新开一个线程，在 Page_Load    中加入以下代码：
         Thread thread = new Thread( new ThreadStart(ThreadProc) );
         thread.Start();
     thread.Join();
在类中增加以下函数：
         private void ThreadProc()
         {
              string strScript = "<script>setPgb('pgbMain','{0}');</script>";
              for ( int i = 0; i <= 100; i++ )
              {
                   System.Threading.Thread.Sleep(10);
                   Response.Write( string.Format( strScript, i ) );
                   Response.Flush();
              }
     }
注意，在以上代码中我们使用 for 循环，在i每增加一次的情况下往客户端发送一段脚本 <script>setPgb('pgbMain','{0}');</script>， 其中的 {0} 会被相应的 i 替换，而该段脚本会调用预先写好的javascript函数 setPgb， 更改页面的进度条状态。
 
 
pigmaster
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
6个非常经典Web前端使用的炫丽进度条（一）
08-18
在线效果：http://ynif.v099.10000net.cn/demo/jindu/1/jindu/index.html
ASP.NET 进度条(附源代码)
weixin_34375054的博客
10-27 190
1. 进度条模板文件 ProgressBar.htm  1 &lt;html&gt;  2 &lt;head&gt;  3 &lt;title&gt;&lt;/title&gt;  4 &lt;script language="javascript"&gt;  5 //设置进度条进度  6 function SetPorgressBar(msg, pos)  7 {  8     ...
一个ASP.NET的进度条
guanhua8的专栏
04-20 775
1.创建进度条：                    正在检索数据，请稍候...                                                 
web进度条
死磕技术 活出人生
08-28 3119
在处理长任务，大数据交互是，程序容易造成假死，用户也不知道程序在做什么，于是就需要一个进度条，但是网上进度条实例，效果都不佳，都不能实时更新进度条，比如伪进度条就只能是一张图片，还有的是事务处理完后，记录监控的时间，再完成进度条显示，这肯定是不可以的。还有一种是比较实用，但是把事务处理随着进度条一起处理，也就是进度条是从1%到100%，那么事务就处理一百次。于是结合网上实例，我写了下面的这个多线程
ASP.NET实现进度条
J_JAKE（陆冷飞）的专栏
06-26 854
 在网上查阅了很多相关资料，参照对比一番后自己整理了一下，做了个小例子。能够实现根据后台数据加载的进度在前台动态更新进度条、进度条在页面居中显示、在进度条内显示百分比，完成进度后隐藏进度条。个人感觉还是有一定的参考价值，贴出来先。建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下：DOCTYPE html PUBLIC "-//W3C//D
c# Web网页实现进度条
11-07
- `Web.config`文件是ASP.NET应用程序的配置文件，用于设置各种应用程序级别的配置，如数据库连接字符串、身份验证模式等。在实现进度条的过程中，可能需要配置允许跨域请求（如果适用）或调整其他相关设置。 ```...
webApi、MVC、ajax分段上传文件带进度条
10-24
MVC（Model-View-Controller）是一种设计模式，常用于构建Web应用程序。在ASP.NET MVC中，Model负责业务逻辑，View负责展示数据，Controller处理用户请求并协调Model和View。在文件上传的场景中，Controller可以接收...
在C#窗体应用程序中载入Web页
10-30
在C#窗体应用程序中载入Web页是一个常见的需求，特别是在开发桌面应用时需要集成网络功能。Visual Studio 2010（VS2010）提供了强大的工具和类库来帮助开发者实现这一功能。本篇文章将深入探讨如何在C#窗体应用中...
android web应用
03-01
Android Web应用是基于Android平台构建的应用程序，它们利用WebView组件展示和交互Web内容。WebView是一个可以在Android应用中嵌入的浏览器控件，使得开发者能够融合Web技术和原生Android功能，为用户提供混合式应用...
housetally:HouseTally 点跟踪 Web 应用程序
06-30
总的来说，HouseTally是一个使用JavaScript技术构建的Web应用程序，它为用户提供了便捷的点跟踪功能，涵盖了任务管理、进度追踪等多个方面，旨在提升家庭或小团队的工作效率。通过深入研究其源代码，开发者可以学习...
一个基于ASP.NET+C#实现的Web上传进度条控件程序例子
09-29
一个基于ASP.NET+C#实现的Web上传进度条控件程序例子。
C#进度条实现-真实进度
10-15
- 实现效果，点击按钮弹出进度条窗口，并开始执行任务，在进度条及文本标签中更新任务进度，关闭进度窗口时可终止任务 - 实现技术，多线程（主线程更新UI，子线程处理耗时任务），委托
实时web进度条
08-28
在处理长任务，大数据交互是，程序容易造成假死，用户也不知道程序在做什么，于是就需要一个进度条，但是网上进度条实例，效果都不佳，都不能实时更新进度条，比如伪进度条就只能是一张图片，还有的是事务处理完后，记录监控的时间，再完成进度条显示，这肯定是不可以的。还有一种是比较实用，但是把事务处理随着进度条一起处理，也就是进度条是从1%到100%，那么事务就处理一百次。于是结合网上实例，我写了下面的这个多线程进度条。 我写的这个进度条的特点是： 可以根据事务处理的时间，实时更新进度条，简单的说是：比如一个长任务，大数据交互大概要话4分钟的话，那么我们就可以把进度条从1%到100%，每跟进一步，就是40微秒，当然这是多线程的。一个线程处理进度条，主线程处理长任务，大数据交互部分，也就是说如果一个长任务，大数据交互大于4分钟，那么进度条先执行完，但是进度条线程会让自己全部执行完，才把cup交给主线程。如果正常情况一个长任务，大数据交互小于或等于，那么正好是我们要的效果。
CKplayer-超酷网页视频播放器-其他
06-12
ckplayer是一款在网页上播放视频的免费的播放器，功能强大，体积小巧，跨平台，使用起来随心所欲。 <p>CKplayer播放器主要以adobe的flash（所使用的版本是CS5）平台开发，所以在支持flash插件的平台和浏览器上都可以使用，而无需下载其它插件，如果你需要修改完整版里提供的相关的flash源文件，请使用adobe的flash cs5以上版本打开源文件修改。</p><p>ckplayer同时也支持html5的视频播放，即同时可以在Ipad，Iphone等IOS平台上播放视频，并且只需简单代码就可以使用，无需了解html5插入视频的方法。</p><p>软件在对各平台的兼容性方面适应性比较强，比如你可以设置在Android平台或wp平台上在用户已安装flash插件的时候使用flash播放器，在没有装flash插件的情况下使用html5播放器。</p><p>ckplayer是一种前台使用的程序，不涉及到服务器程序（asp,php,jsp,.net），也不涉及到对服务器的操作(即不需要写入权限)，所以不存在安全方面的问题。同时可以集成在任何程序中，包括asp,php,jsp,.net以及其它支持插入flash的环境中。</p><p>功能列表：</p><p>兼容SWF/HTML5跨平台播放</p><p>支持流行视频格式flv，f4v，mp4，</p><p>支持html5格式m3u8,webm,ogg theora,mp4</p><p>支持RTMP协议下的视频直播和回放</p><p>支持前置广告（swf,图片,视频）</p><p>支持前置广告多个随机/顺序播放</p><p>支持暂停广告(swf,图片)多个随机播放</p><p>支持缓冲广告，小窗口广告，滚动文字广告</p><p>支持多达6种形式的视频地址调用方式</p><p>支持多段视频无缝播放，支持多集连播</p><p>支持视频预览功能</p><p>自定义提示点功能，跳过片头片尾功能</p><p>bshare完美视频分享功能</p><p>调节视频尺寸，亮度，对比度，色相，饱和度功能</p><p>支持播放结束显示精彩视频推荐</p><p>支持自定义播放器界面，无需了解程序，即可自己制作出风格</p><p>支持js和播放器的互动操作，可以任意控制播放器的动作，比如暂停/播放</p><p>丰富的api接口,快速打造功能强大的插件</p><p> </p><p>CKplayer-超酷网页视频播放器 v6.8 更新日志： </p>一：修复Bug 1：修复了已知的bug 2：修正了html5中监听time的错误 3：新加了几个交互函数 4：风格设置里增加了提示文本底色及圆角的功能 二：增加功能 1：增加了全屏模式下启用键盘输入的功能，设置方法分二步：调用代码var flashvars={}里增加fs:'1',以及var params={}里增加allowFullScreenInteractive:true 2：增加了在播放器内显示文本元件的功能。 3：增加了新的调用视频地址的方式：json调用。 感谢各位朋友对ckplayer的支持，在本次升级中，许多朋友提供了好的建议，虽然因为考虑到大部分用户的需求后决定一些功能没有对其进行更改。 6.7升级至6.8的方法 1：替换ckplayer.swf 2：替换ckplayer.js中的315行（(function() {）及以下的所有内容 3：ckplayer.js中setup属性的第21个值在正式使用时设置成0 4：language.xml里增加了控制提示文字的样式：{font color='#FFFFFF' face='Microsoft YaHei' size='16'}[$prompt]{/font} 5：languae.xml里增加了新版默认风格里的设置的提示文本样式：{font color='#FFFFFF' face='Microsoft YaHei,\u5fae\u8f6f\u96c5\u9ed1' size='14'}设置{/font} (也可以直接替换掉languae.xml) 6：如果要使用新的风格，需要替换掉目前的style.swf，并同时删除ckplayer.js中和ckplayer.xml中安装的插件代码。详细的可以对照新的ckplayer.js中的: function ckcpt() {   var cpt = '';   return cpt; } 以及ckplayer.xml中的的节点
asp.net页面加载前进度条
04-06
asp.net页面加载前进度条 .net 滚动条 C# .net页面状态
asp.net 进度条
weng2961389的专栏
11-25 377
<br />建立一个WEB工程，添加新项->HTML页面，命名为ProgressBar.htm，内容如下： 无标题页 "; Response.Write(jsBlock); Response.Flush(); } private void Page_Load(object sender, System.EventArgs e) { beginProgress();
ASP.NET实现进度条效果【转】
dibanmi2602的博客
12-29 197
原文地址：http://www.jb51.net/article/115310.htm 这篇文章主要为大家详细介绍了ASP.NET实现简单的进度条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 我们先看下进度条效果 我点击了按钮后他会显示进度页面，进度完成后，进度条消失，其实也是比较简单的了。 我们需要一个进度条代码文件ProgressBar.htm（...
C# 加载web页面时显示进度条的js实例方法
leek的专栏
07-09 841
//网页加载进度显示 代码 //添加 引用 命名空间 using System.Threading; // // Response.Write("");
C#多线程进度条设计
bei_yan的专栏
11-13 1357
在多线程的情况下，其它线程无法直接调用到主线程上的控件，只能通过代理来实现主线程上控件的调用。 1、定义委托 　　 // 执行任务的委托声明（解决长任务死假） 　　delegate void RunTaskDelegate(int seconds); 　　// 显示进度条的委托声明（跨线程调用控件） 　　delegate void ShowProgressDelegate(in
devexpress 进度条
最新发布
08-30
DevExpress是一个提供软件开发工具和解决方案的公司，其中包括进度条控件。DevExpress进度条是一种用于表示任务或操作进展的控件，可以在应用程序中使用。开发人员可以使用DevExpress进度条控件来显示当前任务的进度，并通过设置控件的属性来控制进度的显示样式和外观。 DevExpress进度条控件提供了多种自定义选项，使开发人员能够根据应用程序的要求进行调整。开发人员可以设置进度条的最小值和最大值，以及当前任务的进度值。可以选择显示水平进度条或垂直进度条，也可以设置颜色和外观。 DevExpress进度条控件还提供了一些附加功能，如显示百分比标签、显示进度文本、显示进度条动画等。这些功能可以根据需求进行配置和定制。 通过使用DevExpress进度条控件，开发人员可以向用户提供直观的任务进度展示，帮助用户了解当前任务的进展情况，并提高用户体验。开发人员还可以通过设置进度条控件的事件来实现与其他部件或功能的联动。 总之，DevExpress进度条控件是一个功能强大且灵活的工具，它可以帮助开发人员实现任务进度的展示和管理。无论是在桌面应用程序还是Web应用程序中，都可以使用DevExpress进度条控件来提升用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值