HTML5學習系列——<progress>元素

progress>是HTML5中新增的狀態交互元素，用來表示頁面某個任務完成的進度。

progress>有兩個屬性值：value和max，value的值必須小於或等於max的值，兩者都必須大於0.

progress>交互元素在下載中使用

創建一個元素和一個“下載”按鈕。當單擊按鈕時，元素動態展示下載進度狀態和百分比信息；下載結束時，提示“下載完成！”。

CSS：

body{font-size: 13px;}

p{padding: 0px;margin:0px;}

 .inputbtn{border:1px solid #ccc;background: #eee;line-height: 18px;font-size: 12px;}

HTML：

<去掉p id="pTip">開始下載

<中文progress value="0" max="100" id="proDownFile">

<就可以input type="button" value="下載" class="inputbtn" onClick="Bth_Click();">

JavaScript：

var intValue=0;

var intTimer;

var objPro = document.getElementByIdx_x_x_x('proDownFile');

var objTip = document.getElementByIdx_x_x_x('pTip');

function Interval_handler(){

intValue++;

objPro.value = intValue;

if(intValue>=objPro.max){

clearInterval(intTimer);

objTip.innerHTML = "下載完成！";

}else{

objTip.innerHTML= "正在下載" + intValue + "%";

}

}

function Bth_Click(){

intTimer = setInterval(Interval_handler,100);

}