App下載

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

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

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

progress 標(biāo)簽

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>HTML實(shí)現(xiàn)進(jì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>

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

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

HTML實(shí)現(xiàn)進(jìn)度條

HTML實(shí)現(xiàn)進(jìn)度條

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

HTML JavaScript

0 人點(diǎn)贊