HTML——那些自带交互特征的HTML元素（progress元素、）

那些自带交互特征的HTML元素5、务必使用progress元素实现进度条5.1、progress元素的基本特性5.2、progress元素的样式自定义6、务必使用meter元素显示密码强度6.1、meter元素的基本特性6.2、meter元素的美化技巧5、务必使用progress元素实现进度条在上传图片或者下载资源的时候往往都会用百分比进度条来表示当前任务的效果。此时千万不要花费大量的时间和代码去模拟浏览器提供了原生的HTML元素样式自定义方便兼容性良好且语义一级棒。这个元素就是progress元素。5.1、progress元素的基本特性progress元素的使用方法非常简单使用max属性设置进度范围使用value属性值表示当前进度就会显示对应的进度效果例如此时效果如图所示。如果我们没有设置value属性则进度条进入不确定态样式表现为循环等待状态。操作系统不同浏览器不同等待效果的样式也会有所不同例如在Chrome 118Windows系统下会看到一个胶囊一样的小色块反复横移如图所示。此状态会匹配CSSindeterminate伪类我们可以据此对progress元素的不确定态进行样式自定义这在下一节会有说明。DOM对象属性progress元素有4个专属的DOM对象属性分别是max、value、position和labels。其中max指最大值。若缺省则进度值范围是0.01.0若设置成max“100”则进度值范围是0100。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代码