HTML5中的progress元素用于表示页面中某个任务完成的进度(进程)。<progress>元素的value属性设置正在进行时的值,表示已完成的工作量,max属性设置完成时的值,表示总体工作量。(来源于《HTML5 实战》一书)实例如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>progress元素在下载中使用</title>
<style type="text/css">
body,p{margin:0;padding:0;}
body{font-size:14px;}
.inputbtn{border:solid 1px #ccc;background-color:#eee;line-height:18px;font-size:12px;}
</style>
</head>
<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>
</html>
显示效果如下所示: