示例一:
<!doctype html> <html> <head> <meta charset="utf8"> <title>Process Bar</title> <script> var t; function s(c) { if(c<=100) { val.style.width=c+"%"; percent.innerHTML=c+"%"; btn.disabled=true; btnp.disabled=false; c=c+10; t=setTimeout("s("+c+")",500); } else { clearTimeout(t); btnc.disabled=false; btnp.disabled=true; return; } } function c() { clearTimeout(t); val.style.width="0px"; percent.innerHTML="0%"; btn.disabled=false; btnc.disabled=true; btnp.disabled=true; btnp.value='Pause'; } function p() { var temp; if('Pause' == btnp.value) { clearTimeout(t); btnp.value='Go on'; btnc.disabled=false; } else { temp=val.style.width; btnp.value='Pause'; var k=parseInt(delEnd(temp)); s(k); btnc.disabled=true; } } function delEnd(str) { var temp=""; for(var i=0; i < str.length-1; i++) { temp=temp+str[i]; } return temp; } </script> </head> <body> <div id="bar" style="width:300px; height:30px; border:solid 1px; float:left;"> <div id="val" style="height:100%; background-color:#03F; width:0px;"></div> </div> <div id="percent" style="float:left; line-height:30px;">0%</div> <div style="clear:both"></div> <br /> <input id="btn" type="button" value="Start" onClick="s(0)" /> <br /> <input id="btnc" type="button" value="Clear" onClick="c()" disabled /> <br /> <input id="btnp" type="button" value="Pause" onClick="p()" disabled /> </body> </html>
再来分享一个结合.net的
建立一个WEB工程,添加新项->HTML页面,命名为ProgressBar.htm,内容如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" id="mainWindow"> <head> <title>无标题页</title> <script language="javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenHeight = window["mainWindow"].offsetHeight; var screenWidth = window["mainWindow"].offsetWidth; ProgressBarSide.style.width = Math.round(screenWidth / 2); ProgressBarSide.style.left = Math.round(screenWidth / 4); ProgressBarSide.style.top = Math.round(screenHeight / 2); ProgressBarSide.style.height = "21px"; ProgressBarSide.style.display = ""; //设置进度条百分比 ProgressBar.style.width = pos + "%"; ProgressText.innerHTML = pos + "%"; } //完成后隐藏进度条 function SetCompleted() { ProgressBarSide.style.display = "none"; } </script> </head> <body> <div id="ProgressBarSide" style="position:absolute;height:21x;width:100px;color:Silver;border-width:1px;border-style:Solid;display:none"> <div id="ProgressBar" style="position:absolute;height:21px;width:0%;background-color:#3366FF"></div> <div id="ProgressText" style="position:absolute;height:21px;width:100%;text-align:center"></div> </div> </body> </html>
后台代码,Default.aspx.cs:
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Threading; using System.IO; public partial class _Default : System.Web.UI.Page { private void beginProgress() { //根据ProgressBar.htm显示进度条界面 string templateFileName = Path.Combine(Server.MapPath("."), "ProgressBar.htm"); StreamReader reader = new StreamReader(@templateFileName,System.Text.Encoding.GetEncoding("GB2312")); string html = reader.ReadToEnd(); reader.Close(); Response.Write(html); Response.Flush(); } private void setProgress(int percent) { string jsBlock = "<script>SetPorgressBar('" + percent.ToString() + "'); </script>"; Response.Write(jsBlock); Response.Flush(); } private void finishProgress() { string jsBlock = "<script>SetCompleted();</script>"; Response.Write(jsBlock); Response.Flush(); } private void Page_Load(object sender, System.EventArgs e) { beginProgress(); for (int i = 1; i <= 100; i++) { setProgress(i); //此处用线程休眠代替实际的操作,如加载数据等 System.Threading.Thread.Sleep(50); } finishProgress(); } }
本文向大家介绍vue实现简单loading进度条,包括了vue实现简单loading进度条的使用技巧和注意事项,需要的朋友参考一下 刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级。 一、进度条原理 这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条。主要是让进度条的wi
本文向大家介绍php实现简单的上传进度条,包括了php实现简单的上传进度条的使用技巧和注意事项,需要的朋友参考一下 Web上传文件的三种解决方案分享给大家: 这里我要使用的是form法。通过为表单元素设置enctype=”multipart/form-data”属性,让表单提交的数据以二进制编码的方式提交,在接收此请求的Servlet中用二进制流来获取内容,就可以取得上传文件的内容,从而实现文件的
本文向大家介绍简单实现python进度条脚本,包括了简单实现python进度条脚本的使用技巧和注意事项,需要的朋友参考一下 最近需要用Python写一个小脚本,用到了一些小知识,赶紧抽空记录一下。不深但是常用。 两个进度条示例,拷贝就能运行: 提供一个自己写的一个简单异步进度条,可以在耗时操作前开启,然后再耗时操作结束后停止。 用法: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多
本文向大家介绍JavaScript实现网页加载进度条代码超简单,包括了JavaScript实现网页加载进度条代码超简单的使用技巧和注意事项,需要的朋友参考一下 网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程。但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQu
本文向大家介绍使用Ajax实现简单的带百分比进度条实例,包括了使用Ajax实现简单的带百分比进度条实例的使用技巧和注意事项,需要的朋友参考一下 需求:当进行文件长传保存等操作时,能在页面显示一个带百分比的进度条,给用户一个好的交互体验 实现步骤 JSP页面 1.添加table标签 这个table标签要隐藏,进度条执行的时候再显示。id为tdOne和tdTwo分别为进度条的蓝色和灰色区域。 2.
本文向大家介绍javascript实现继承的简单实例,包括了javascript实现继承的简单实例的使用技巧和注意事项,需要的朋友参考一下 作为一门面向对象的语言,那么继承自然就是一大特征,下面是一段非常简单代码实例,它演示了实现继承的基本原理,有兴趣的或者恰好要学习此方面的朋友可以参阅一下,希望能够给大家来帮组。 以上所述就是本文的全部内容了,希望大家能够喜欢。