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);
}