HTML5动态进度条详解

HTML5新增了进度条控件，无需借助第三方脚本库即可轻松实现进度显示。接下来详细介绍其具体用法和操作步骤，帮助快速掌握该功能的使用方法。

1、 从图中代码可见，只需使用progress控件，即可轻松实现进度条的生成。

2、 运行上述代码即可在页面显示标准进度条。

3、 progress可设定value与max两个参数，用于控制进度状态。

4、 进度条最大值通常设为100，代表整体完成进度。

5、 将当前进度值设为较小数值如12，观察其显示效果。

6、 怎样呈现动态进度条效果？

7、 编写一个JavaScript方法，获取进度条当前值并加1，即可实现进度条前进，具体代码所示。

8、 通过JavaScript设置定时器，每600毫秒执行一次进度条更新函数，持续调用即可实现动态进度效果。

9、 观察运行效果，进度条正逐步增加。

10、 调整定时器间隔时间，数值越小进度条移动越快，数值越大则移动越慢。

11、 将定时器间隔改为200毫秒：var timer = setInterval(set_progress(), 200);

12、 看看效果如何。