当前位置: 首页 > 文档资料 > HTML 宝典 >

3.3.6 progress控件

优质
小牛编辑
125浏览
2023-12-01

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代码了)。