js进度条

最新推荐文章于 2018-09-26 13:42:14 发布

NinetyH

最新推荐文章于 2018-09-26 13:42:14 发布

阅读量86

点赞数

分类专栏： javascript 文章标签： JavaScript HTML ViewUI

本文链接：https://blog.csdn.net/aiyanbo/article/details/83533396

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

我用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);
		}
		οnlοad=run();
	</script>
</html>

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

NinetyH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js进度条

进度条是用来表示：某件事完成量的百分比，有很多情况下我们都会用到它！我用js代码写了一个进度条，样式可能不是很漂亮！为了进度量不是一个等差数列，我用随机数来做进度数列的差值下是代码：（还望朋友们指正！） &lt;html&gt;&lt;head&gt; &lt;title&gt;js 进度条&lt;/title&gt;&lt;/head&gt;&lt;b...
复制链接

扫一扫

专栏目录