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

項目一:

總結

以上是生活随笔為你收集整理的html range关联文本框,HTML5gt;meter标签与input(type=range)标签结合制作简易范围指示器...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。