《HTML5 开发实例大全》——1.13 使用< progress >标记元素实现进度条效果-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

《HTML5 开发实例大全》——1.13 使用< progress >标记元素实现进度条效果

简介:

本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章,第1.13节,作者: 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。

1.13 使用< progress >标记元素实现进度条效果


3fb72fc9c69752d47b38cf3ec815bd64715f4aa3

实例说明

在全新HTML 5中,可以使用< progress >标记元素实现进度条效果。当页面在与用户进行数据交互时,为了增强用户的UI体验,通过进度条效果显示在页面中的各种进度状态。< progress >元素是HTML 5中新增的状态交互元素,用来表示页面中的某个任务完成的进度。例如,我们在下载一个文件时,文件下载到本地的进度值,可以通过该元素动态展示在页面中。展示进度的方式既可以使用整数,也可以使用百分比(如10%~100%)。

< progress >元素的属性信息如表1-3所示。


39d1e9dbbc790e74df682cd1dd88aa072fb8f0e0

在< progress >元素中,设置的“value”值必须小于或等于“max”属性值,并且两者都必须大于0。

本实例的功能是,分别在页面中创建一个< progress >元素和一个“下载按钮”。当单击“下载按钮”时,通过元素< progress >动态展示下载进度状态和百分比信息。当下载结束时显示“恭喜你,下载已经完成!”的提示信息。

具体实现

使用Dreamweaver创建一个名为“013.html”的文件,具体代码如下所示:

<!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:#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>

在上述代码中,为了使< progress >元素能够动态展示下载进度,需要通过JavaScript脚本语言编写一个定时事件。在这个事件中累加变量值,并将该值设置为< progress >元素的“value”属性值。当这个属性的值大干或等于< progress >元素的“max”属性值时停止累加,并显示“恭喜你,下载已经完成!”的提示信息;否则将动态显示正在累加的百分比数,具体设置是通过JavaScript脚本代码实现的。

执行后的效果如图1-23所示,当单击“下载按钮”后弹出一个进度条效果,如图1-24所示。


<a href=https://yqfile.alicdn.com/daceeac624ae89491c15e18d584fae90186df2e0.png" >

进度条完成后的效果如图1-25所示。


<a href=https://yqfile.alicdn.com/6f7bbd686ac5e74f5daa4d39794f3dec1a882cde.png" >

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章