`
aiyanbo
  • 浏览: 64372 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

js进度条

JavaScriptHTML
阅读更多

进度条是用来表示：某件事完成量的百分比，有很多情况下我们都会用到它！

 

我用js代码写了一个进度条，样式可能不是很漂亮！为了进度量不是一个等差数列，我用随机数来做进度数列的差值

 

下是代码：（还望朋友们指正！）

 

<html>
<head>
	<title>js 进度条</title>
</head>
<body>
	<p align="center">
	<span id="show" style="border:1px solid red;width:800px;height:30px;">
		<hr id="bar" align="left" style="height:30px;width:0px;" color="red">
	</span>
	<span id="total"></span>
	</p>
</body>
	<script language="JavaScript">
		var per=0;
		function run(){
			per+=parseInt(Math.random()*1000000%20);
			document.getElementById("bar").style.width=per;
			if(per>=800)per=800;
			document.getElementById("total").innerHTML=parseInt((per/800)*100)+'%';
			if(per>=800){
				clearTimeout(timeout);
				return;
			}
			var timeout=setTimeout("run()",100);
		}
		onload=run();
	</script>
</html>

 

 

下面是附件，朋友们可以下载下来看看效果！

 

 

1
顶
0
踩
分享到：
| 网页版 家庭骰子
评论
1 楼 aiyanbo 2010-02-18  
    近日，本人发现了  进度条在火狐中跑不起来！对不起，在改进中。。。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics