進(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。