实现纯手写的进度条

时间 2019-11-29

标签实现手写进度繁體版

原文原文链接

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

<!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>

实现的效果如图：css

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

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

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

clearInterval() 为清除定时执行jquery

附setInterval()的详细用法函数

定义和用法

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

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

语法
setInterval(code,millisec[,"lang"])
参数描述

code 必需。要调用的函数或要执行的代码串。

millisec
必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。cdn

定义和用法

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

语法
clearInterval(intervalid);
参数描述

intervalid 必需。setInterval函数后返回的对象

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

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。cdn