核心提示：使用progress标记元素实现进度条效果!doctype htmlhtml lang=en headmeta charset=UTF-8title使用progress元素/titlestyle ty...
使用progress标记元素实现进度条效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用progress元素</title>
<style type="text/css">
body{
font-size:12px}
p{
padding:0px;
margin:0px;
}
.inputbtn{
border:solid 1px #ccc;
background-color:#eee;
line-height:18px;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascipt">
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>
<p id="pTip">开始下载</p>
<progress value="0" max="100" id="proDownFile"></progress>
<input type="button" value="下载按钮" class="inputbtn" onclick="Btn_Click()">
</body>
</html>
