HTML宝典(第 1 版)
3.3.6 progress控件
阅读(

HTML基础

HTML元素

表单及应用

什么是表单

Form元素

表单控件

keygen控件

select控件

textarea控件

input控件

label控件

progress控件

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

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

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

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

progress控件
图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用户指南》、《Bootstrap3实用教程》,并全部在 GitHub 上开源。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我写出更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验