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

}