html range关联文本框,HTML5>meter标签与input(type=range)标签结合制作简易范围指示器...

HTML5>meter标签与input(type=range)标签结合制作简易范围指示器

发布时间：2020-03-26 15:41

很多时候我们能看到这样的表示范围的优化工具，能给人带来很好的用户体念，今天结合HTML5的两个新标签来制作一个简易的范围提示器，这里用到的两个新标签是meter和input(type=range)。

meter定义和用法

meter元素标签用来表示范围已知且可度量的等级标量，如磁盘使用量比例、关键词匹配程度等。需要注意的是，不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。元素共有6个属性：

Value：表示当前标量的实际值；如果不做指定，那么标签中的第一个数字就会被认为是其当前实际值，例如2outof10中的"2"；如果标签内没有数字，那么标量的实际值就是0。

Min：当前标量的最小值；如不做指定则为0。

Max：当前标量的最大值；如不做指定则为1；如果指定的最大值小于最小值，那么最小值会被认为是最大值。

Low：当前标量的低值区；必须小于或等于标量的高值区数字；如果低值区数字小于标量最小值，那么它会被认为是最小值。

High：当前标量的高值区。

Optimum：最佳值；其范围在最小值与最大值区间当中，并且可以处于高值区。

Input类型-range定义

range类型用于应该包含一定范围内数字值的输入域。

range类型显示为滑动条。

您还能够设定对所接受的数字的限定：

实例

请使用下面的属性来规定对数字类型的限定：

属性值描述

maxnumber规定允许的最大值

minnumber规定允许的最小值

stepnumber规定合法的数字间隔(如果step="3″，则合法的数是-3,0,3,6等)

valuenumber规定默认值CSS部分

#box{position:relative;}

.meter_box{margin:0auto;width:600px;overflow:hidden;}

.meter_boxmeter{display:block;width:480px;height:30px;float:left;}

span{display:block;height:30px;line-height:30px;float:left;margin-right:10px;font-size:14px;color:#1690ef;font-weight:700;}

.notice_text{text-align:center;font-size:15px;color:#ff0000;font-weight:700;}

.input_box{width:600px;margin:20pxauto;height:30px;overflow:hidden;}

.input_boxinput{width:480px;height:30px;float:left;}

#value_text{display:block;width:100px;height:100px;color:#fadd0d;

font-family:Constantia,Georgia;font-size:50px;font-weight:700;position:absolute;right:100px;

top:1px;text-shadow:1px1px1px#fff;background-color:#ee4d73;line-height:85px;text-align:center;border-radius:50px;}HTML部分

项目二:

5

项目一: