實現純手寫的進度條

時間 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

參數	描述
intervalid	必需。setInterval函數後返回的對象

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。