使用progress元素--html5学习

最新推荐文章于 2021-09-25 17:47:45 发布

丁丁Arene

最新推荐文章于 2021-09-25 17:47:45 发布

阅读量1.4k

点赞数

分类专栏：前端开发文章标签： html css javascript html5

本文链接：https://blog.csdn.net/u010543271/article/details/43154259

版权

前端开发专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<progress>标签是html5中的新标签，用来标示任务的进度（进程）。与 JavaScript 一同使用，来显示任务的进度，如下载进度、上传进度等。

IE10及以上版本, Firefox, Opera, 谷歌， Safari 6 支持 <progress> 标签。IE9 以及更早的版本不支持 <progress> 标签。

用例：

<!DOCTYPE html>

<html>
<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:#009acd;
line-height:18px;
font-size:12px;
cursor:pointer;
border-radius:10px;
border:none;
}
</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 = "waiting，正在下载" + intValue + "%";
}
}
//下载按钮点击事件
function Btn_Click(){
intTimer = setInterval(Interval_handler, 100);
}
</script>
</body>
</html>