描述:<progreess>是HTML5中新增的状态交互元素,用来表示页面中的某个任务完成的进度(进程);
代码如下:
<body>
<p id="pTip">开始下载</p><progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下载" class="inputbtn" onClick="Btn_Click();">
<script type="text/javascript">
var intValue=0;
var intTimer;
var objPro=document.getElementById('proDownFile');
var objTip=document.getElementById('pTip');
//定时事件
function Interval_handler(){
intValue++;
objPro.value=intValue;
if(intValue>=objPro.max){
clearInterval(intTimer);
objTip.innerHTML="下载完成!";
}else{
objTip.innerHTML="正在下载"+intValue+"%";
}
}
//下载按钮单击事件
function Btn_Click(){
intTimer=setInterval(Interval_handler,100);
}
</script>
</body>
在Chrome中的效果: