几个javascript显示加载进度条代码

来源：蓝色理想时间：2008-01-19 10:52:00　

最近发现一常见的加载进度条（loadding）的问题,所以试试,觉得还不错,大家可以看下.当然这个只是一个效果而已！

呵呵，用的着的时候，你就知道有用了。比如群发email，fax少不了进度条的，更简单的我们直接用一个loadding图片代替也可以!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 进度条 </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT="text/html"><META NAME="Description" CONTENT="有关windows中进度条的实现"><style type="text/css">#out{width:300px;height:20px;background:#EEE;}#in{width:10px; height:20px;background:#778899;color:white;text-align:center;}#font_color{background:yellow;text-align:center;color:white;}</style></HEAD><BODY onload="start();" ><div id='out'><div id="in" style="width:10％">10％</div><div><script type="text/javascript">i=0;function start(){ ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数}function begin(){ i+=1;if(i<=100){document.getElementById("in").style.width=i+"％"; document.getElementById("in").innerHTML=i+"％";}else{ clearInterval(ba);document.getElementById("out").style.display="none";document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");}}</script></BODY></HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> 进度条 </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT="text/html"><META NAME="Description" CONTENT="有关windows中进度条的实现"><style type="text/css">#out{width:300px;height:20px;background:#ccc; position:relative}#in{width:10px; height:20px;background:#03f;color:white;text-align:center;overflow:hidden;}#in_0{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; position:absolute; z-index:-1;}#in_1{text-align:center; width:300px; font-weight:bold; height:20px; line-height:20px; color:#fff;}#font_color{background:yellow;text-align:center;color:white;}</style></HEAD><BODY onload="start();" ><div id='out'><div id="in_0">已加载10％</div><div id="in" style="width:10％"><div id="in_1"></div></div><div><script type="text/javascript">i=0;function start(){ ba=setInterval("begin()",100);//setInterval 返回的是一个全局变量，一个间隔数值.这个数值是表示调用setInterval的次数}function begin(){ i+=1;if(i<=100){document.getElementById("in").style.width=i+"％"; document.getElementById("in_0").innerHTML= document.getElementById("in_1").innerHTML="已加载"+i+"％";}else{ clearInterval(ba);document.getElementById("out").style.display="none";document.write("<span style='background:yellow;text-align:center;color:white;'>加载成功</span>");}}</script></BODY></HTML>

标签：进度条,javascript

投稿

几个javascript显示加载进度条代码

猜你喜欢

Python端口扫描简单程序

用Assets 面板为你的站点定做颜色

javascript实现圣旨卷轴展开效果（代码分享）

Python reduce()函数的用法小结

IE7的web标准之道 Ⅱ

基于Go语言实现插入排序算法及优化

python使用sklearn实现决策树的方法示例

git本地分支和stash内容报错消失的问题

Python实现滑块拼图验证码详解

一个ASP写的侧边菜单栏

详解Django模版中加载静态文件配置方法

浅谈Python中函数的定义及其调用方法

五步让你成为GO 语言高手

Django中Aggregation聚合的基本使用方法

有关div页面拖动、缩放、关闭、遮罩效果代码

python基于pyppeteer制作PDF文件

mysql中的mvcc 原理详解

用python的seaborn画数值箱型图

python ChainMap 合并字典的实现步骤

Python简单实现Base64编码和解码的方法