App下載

HTML如何實現(xiàn)進度條？附源碼

猿友 2021-05-27 11:27:52 瀏覽數(shù) (6528)
反饋

進度條在網(wǎng)頁開發(fā)中還是很常見的，比如當我們下載某個文件時，會顯示下載進度。那么這篇文章 w3cschool 小編來教你 HTML 如何實現(xiàn)進度條。

progress 標簽

在 HTML5 中，有專門的特性來實現(xiàn)進度條，那就是?<progress></progress>?標簽。但是在使用進度條特性時，我們必須為它設(shè)定交互才能實現(xiàn)動態(tài)進度條。那么我們一起來看下如何使用 progress 吧。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML實現(xiàn)進度條 - 編程獅(w3cschool.cn)</title>
</head>
<body>
	<progress id="progress" value="0" max="100"></progress>
	<button onclick="load(100)">下載</button>
	<script type="text/javascript">
		function load(n){
			if (n==0) {alert("下載完成")};
			var progress=document.getElementById("progress");
			n=n-1;
			task=100-n;
			progress.value=task;
			setTimeout("load("+n+")",100);
		}
	</script>
</body>
</html>

我們看代碼可以了解到，單純的標簽是不能起作用的，需要使用 script 語句去進行控制。在 progress 標簽中，我們需要為它設(shè)置 max 屬性值，max 是指進度條的最大值；value 是用來設(shè)置或者返回進度條 value 的屬性值。

在 script 語句中，我們首先要設(shè)置點擊事件，也就是點擊按鈕交互開始。其次設(shè)置一個變量值，最后使用?setTimeout()?方法去計時。讓我們來看下具體實現(xiàn)效果：

HTML實現(xiàn)進度條

HTML實現(xiàn)進度條

以上就是文章“HTML 如何實現(xiàn)進度條？附源碼”的全部內(nèi)容。更多HTML學習請關(guān)注 w3cschool。

HTML JavaScript

0 人點贊