企业官网建设流程全解析

5、务必使用<progress>元素实现进度条

在上传图片或者下载资源的时候，往往都会用百分比进度条来表示当前任务的效果。

此时，千万不要花费大量的时间和代码去模拟，浏览器提供了原生的HTML元素，样式自定义方便，兼容性良好，且语义一级棒。

这个元素就是<progress>元素。

5.1、<progress>元素的基本特性

<progress>元素的使用方法非常简单，使用max属性设置进度范围，使用value属性值表示当前进度，就会显示对应的进度效果，例如：

此时效果如图所示。

如果我们没有设置value属性，则进度条进入不确定态，样式表现为循环等待状态。操作系统不同，浏览器不同，等待效果的样式也会有所不同，例如在Chrome 118Windows系统下，会看到一个胶囊一样的小色块反复横移，如图所示。

此状态会匹配CSS：indeterminate伪类，我们可以据此对<progress>元素的不确定态进行样式自定义，这在下一节会有说明。

DOM对象属性，<progress>元素有4个专属的DOM对象属性，分别是max、value、position和labels。其中：

• max指最大值。若缺省，则进度值范围是0.0～1.0；若设置成max=“100”，则进度值范围是0～100。
• value表示当前进度值。
• position是只读属性，表示当前进度比例，计算值等于value/max，如果是不确定态，则position属性的值是-1。
• labels也是只读属性，得到的是指向该<progress>元素的<label>元素合集。例如，有如下所示的HTML代码：
  
  执行下面的JavaScript代码后，可以在控制台看到图所示的运行结果。
  

5.2、<progress>元素的样式自定义

由于默认的<progress>元素样式往往不是业务需要的，因此我们需要进行额外的样式自定义，此时参考下面的代码进行设置就可以了。

上述代码的效果如图所示。

如果同时希望对不确定态的进度条元素进行样式自定义，则可以使用：indeterminate及背景图像动画来模拟原生的水平来回移动效果，参考CSS代码如下（在上述自定义CSS代码的基础上新增）​：

上述代码的效果如图所示。

以上所有代码和截图效果你都可以通过在浏览器中输入地址https://www.htmlapi.cn/3/5-1.html访问来体验。

6、务必使用<meter>元素显示密码强度

<meter>元素和<progress>元素类似，都是特定场景专用的HTML元素，非常适合用来实现图所示的密码强度提示效果。

无论是跟随强度的色值变化，还是弱、中、强的文字提示，都可以仅通过CSS方法实现，无须使用JavaScript代码去控制DOM元素的色值与尺寸变化。

在具体介绍如何实现之前，我们先了解一下<meter>元素的基本特性和美化技巧。

6.1、<meter>元素的基本特性

单词meter直译意思是“计量器”​“计量表”​，因此，在Web中，任何与丈量相关且需要分阶段提示的场景都非常适合使用<meter>元素。

例如，汽车油箱剩余油量、降雨量、风度、温度、游戏中人物角色的血量等。

先看下面一段代码：

此时，在Chrome浏览器下就会有图所示的效果（不同的操作系统和不同版本的Chrome下的效果可能会有所不同）​，从上往下进度部分的颜色分别是红、黄、绿。

上述示意代码中出现了6个HTML属性，正好涵盖了<meter>元素所有的常用属性。

属性简介

• min和max属性表示数值范围，默认为0或1。也就是说，如果min属性不做设置，则默认为0；如果max属性不做设置，则默认为1。
• value表示当前的值，默认为0。
• low和high是比较特殊的HTML属性，目前仅出现在<meter>元素上，表示警戒值，其中low表示过低警戒值，high表示过高警戒值。

但是，大家务必注意，是过低还是过高、是否需要警戒值还需要一个属性进行判定，那就是optimum属性。

optimum属性表示最佳值，用来决定过低值和过高值是正常还是属于异常，这个属性很重要，也是学习<meter>元素的难点。

对optimum属性的作用表现描述如下。

• 如果optimum属性值在low和high之间，则说明low和high都是警戒值，只有在这个区间范围内的值才是正常的，因此，最终的色值状态只有两个，即橙色警戒和绿色正常。
  代码示意：
  
  效果如图所示，最多只会出现两种颜色。
  
• 如果optimum属性值比low小，则说明low不是警戒值，而是推荐值，也就是值越小安全性反而越高，此时，low-high之间的范围就属于警戒范围，而超过high的值就属于危险范围了。
  于是，最终<meter>元素可以有3段色值状态，HTML代码示意如下：
  
  效果如图所示，出现了三种颜色。
  
• 如果optimum属性值比high大，也会出现3段色值状态，此时，大于high的值会被认为是正常的，因此表现为绿色，这个效果就是一开始提到的密码强度对应的效果，代码示意：
  
  效果如图所示，依次出现了红、黄、绿三种颜色。
  
  回到一开始提到的密码强度效果，由于密码强度越强越好，因此，很显然需要设置optimum属性值比high大。

但是，我们需要的是下图这样的效果，需要明显分段，而浏览器默认的<meter>元素效果就是一个色条，不符合产品需求，所以我们还需要对<meter>元素的外观进行自定义。

6.2、<meter>元素的美化技巧

在现代浏览器下，<meter>元素提供了若干个伪元素，这可以让我们对<meter>元素进行样式自定义。

其中，Chrome浏览器和Safari浏览器可以使用的伪元素非常丰富，Firefox浏览器可以使用的伪元素相对少一些。

这里，主要以Chrome浏览器为例。

所有可以设置<meter>元素的选择器包括下面这些：

• meter元素自身的选择器。
• ::-webkit-meter-inner-element{}。
• ::-webkit-meter-bar{}灰色背景条。
• ::-webkit-meter-even-less-good-value{}红色。
• ::-webkit-meter-optimum-value{}橙色。
• ::-webkit-meter-suboptimum-value{}绿色。

各个伪元素所对应的DOM层级结构如图所示。

使用字符图形表示是这样的：

此时，我们就可以使用上面的伪元素实现我们想要的视觉效果了。

不过，对应的效果比一般的样式自定义复杂一些，因为：

• 表示3种颜色的伪元素最多只会出现1个，而我们的目标效果却是3种颜色同时显示。另外，默认的色值是连续的，而需要的效果是分段的，该怎么实现呢？
• 强度色块下面还有“弱 中 强”的文字提示，这个布局效果又该如何实现呢？

由于解决上述问题用到的是CSS技术，本书旨在介绍HTML，因此不做详细展开，有兴趣的读者可以通过在浏览器中输入地址https://www.htmlapi.cn/3/6-1.html访问来体验。

这里单纯展示一下最终的CSS代码：