HTML progress控件

progress控件

progress控件用来定义一个进度条，用来表示页面中某个任务完成的进度。

progress控件可以是确定的进度，则当前进度是介于某个最小值与最大值之间的值。这种情况下，进度条处于一个静止状态。

<progress min="0" max="100" value="35"></progress>

则表示进度值介于0到100之间，当前进度是35。则进度条静止在35的地方，如图 3‑28 所示：

图3-28 progress控件

progress控件也可以是不确定的进度，仅表示任务正在进行中，而不知道什么时候结束。这种情况下，浏览器默认会显示一个活动的进度条，仅表示任务正在进行中。当然，也可以通过Javascript来更新进度，实现真正的进度条。

progress控件具有可读写value、max两个属性：

• value属性表示任务已完成的进度值，可通过DOM元素progress.value进行操作；
• max属性表示任务所需的总进度值，可通过DOM元素progress.max进行操作；

对于一个确定性的任务，只要能知道已完成进度值及总进度值，就可以通过Javascript实现真实的动态进度条（Javascript超出我们的讨论范围，这里就不提供Javascript代码了）。

关于作者

歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。

版权声明：本文出自 歪脖网 的《HTML宝典》，欢迎在线阅读，并提出宝贵意见。