实现纯手写的进度条

最新推荐文章于 2023-12-14 20:45:00 发布

weixin_33895604

最新推荐文章于 2023-12-14 20:45:00 发布

阅读量777

点赞数

文章标签：前端 python javascript ViewUI

原文链接：https://my.oschina.net/liangwt/blog/777728

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近在网上看到有人用python写了一个进度条，突发奇想也用jquery写了个，全部代码如下

<!DOCTYPE html>
<html>
<head>
	<title>progress-bar</title>
	<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
		var length = 10;
		var index = 0;
		var d1=new Date();
		var begin = d1.getTime();
		$(".progress-bar").html("&nbsp;3kb/s");
		var sleep = setInterval(function(){
			$(".progress-bar").prepend("|");
			index ++;
			if(length<index){
				clearInterval(sleep);
				var d2=new Date();
				var end = d2.getTime();
				var content = $(".progress-bar").html().replace(/3kb\/s/,"ok&nbsp;time:"+((end-begin)/1000)+"s");
				$(".progress-bar").html(content);
			}
		},1000);
	})		
	</script>
</head>
<body>
	<div class="progress-bar"></div>
</body>
</html>

实现的效果如图：

原理十分简单，使用prepend()函数不断在字符串前添加符号即可

为了让每个字符延时输出，这里使用了setInterval()函数

setInterval()函数实现每隔固定时间执行函数，因此参数为一个函数和时间

clearInterval() 为清除定时执行

附setInterval()的详细用法

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法
setInterval(code,millisec[,"lang"])
参数描述
code 必需。要调用的函数或要执行的代码串。
millisec
必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

定义和用法

clearInterval()方法的作用是清除对setInterval函数的调用

语法
clearInterval(intervalid);
参数描述
intervalid 必需。setInterval函数后返回的对象

下面举一个简单的例子。
function show(){
trace("每隔一秒显示一次");
}
var sleep;
sleep=setInterval(show,1000);