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);
}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.