progress>
是HTML5中新增的状态交互元素,用来表示页面某个任务完成的进度。
progress>有两个属性值:value和max,value的值必须小于或等于max的值,两者都必须大于0.
progress>交互元素在下载中使用
创建一个元素和一个“下载”按钮。当单击按钮时,元素动态展示下载进度状态和百分比信息;下载结束时,提示“下载完成!”。
CSS:
body{font-size: 13px;}
p{padding: 0px;margin:0px;}
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);
}