html5进度条
我们在写网页的时候会碰到图片、音频、视频等文件上传或下载，这免不了要用到进度来显示文件上传或下载的进度；下面是一个用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如下图
相关推荐
wusiye 2020-10-23
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
gufudhn 2020-08-09
nercon 2020-08-01
swiftwwj 2020-07-21
nercon 2020-07-16
饮马天涯 2020-07-05
Lophole 2020-06-28
gufudhn 2020-06-12
csstpeixun 2020-06-11
huzijia 2020-06-09
WebVincent 2020-06-06
行吟阁 2020-05-30
qsdnet我想学编程 2020-05-26
gufudhn 2020-05-25
qsdnet我想学编程 2020-05-19
suixinsuoyu 2020-05-15
HSdiana 2020-05-15
PioneerFan 2020-05-15