進(jìn)度條在網(wǎng)頁(yè)開發(fā)中還是很常見的，比如當(dāng)我們下載某個(gè)文件時(shí)，會(huì)顯示下載進(jìn)度。那么這篇文章 w3cschool 小編來(lái)教你 HTML 如何實(shí)現(xiàn)進(jìn)度條。
progress 標(biāo)簽
在 HTML5 中，有專門的特性來(lái)實(shí)現(xiàn)進(jìn)度條，那就是?<progress></progress>?標(biāo)簽。但是在使用進(jìn)度條特性時(shí)，我們必須為它設(shè)定交互才能實(shí)現(xiàn)動(dòng)態(tài)進(jìn)度條。那么我們一起來(lái)看下如何使用 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 語(yǔ)句去進(jìn)行控制。在 progress 標(biāo)簽中，我們需要為它設(shè)置 max 屬性值，max 是指進(jìn)度條的最大值；value 是用來(lái)設(shè)置或者返回進(jìn)度條 value 的屬性值。
在 script 語(yǔ)句中，我們首先要設(shè)置點(diǎn)擊事件，也就是點(diǎn)擊按鈕交互開始。其次設(shè)置一個(gè)變量值，最后使用?setTimeout()?方法去計(jì)時(shí)。讓我們來(lái)看下具體實(shí)現(xiàn)效果：
以上就是文章“HTML 如何實(shí)現(xiàn)進(jìn)度條？附源碼”的全部?jī)?nèi)容。更多HTML學(xué)習(xí)請(qǐng)關(guān)注 w3cschool。
