本节书摘来自异步社区《HTML5 开发实例大全》一书中的第1章，第1.13节,作者： 张明星 更多章节内容可以访问云栖社区“异步社区”公众号查看。
实例说明
在全新HTML 5中，可以使用< progress >标记元素实现进度条效果。当页面在与用户进行数据交互时，为了增强用户的UI体验，通过进度条效果显示在页面中的各种进度状态。< progress >元素是HTML 5中新增的状态交互元素，用来表示页面中的某个任务完成的进度。例如，我们在下载一个文件时，文件下载到本地的进度值，可以通过该元素动态展示在页面中。展示进度的方式既可以使用整数，也可以使用百分比（如10%～100%）。
< progress >元素的属性信息如表1-3所示。
在< 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所示。
https://yqfile.alicdn.com/daceeac624ae89491c15e18d584fae90186df2e0.png" >进度条完成后的效果如图1-25所示。
https://yqfile.alicdn.com/6f7bbd686ac5e74f5daa4d39794f3dec1a882cde.png" >