html5进度条

最新推荐文章于 2021-06-05 01:41:27 发布

iteye_17390

最新推荐文章于 2021-06-05 01:41:27 发布

阅读量216

点赞数

分类专栏： web前端文章标签： html进度条 javascript控制进度条

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

我们在写网页的时候会碰到图片、音频、视频等文件上传或下载，这免不了要用到进度来显示文件上传或下载的进度；下面是一个用html结合javascript编写的进度条显示文件下载的实例；

<!DOCTYPE html>
<html>
<head>
<meta  charset="utf-8"/>
<title>进度条测试</title>
</head>
<body>
<p id="state">开始下载</p>
<progress value="0" max="100" id="proDownload"></progress>
<input  type="button" value="下载"  onClick="download();"/>
</body>


<script type="text/javascript">

var intValue = 0;//从0开始
var intTimer;//计时
var pro = document.getElementById("proDownload");//进度条
var pValue = document.getElementById("state");//下载的状态
//定时事件
function Interval_handler(){
intValue++;
pro.value = intValue;
 if(intValue>=pro.max){
 clearInterval(intTimer);
 pValue.innerHTML="下载完成";
 }else{
 pValue.innerHTML="正在下载"+intValue+"%";
 }
}
//下载按钮单击事件
function download(){
//alert("点击了");
//最大直为100
intTimer = setInterval(Interval_handler,100);
}
</script>
</html>

DEMO如下图