400-685-0732

WJMonitor舆情之声

企业大数据智能舆情监测管理解决方案

全网监测海量数据按需发布监测预警

实时把握舆情动态精准追溯信息源头

获取验证码
企业采购 个人使用
当前位置: 首页 > SEO博客 > HTML5>meter标签与input(type=range)标签结合制作简易范围指示器

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

时间:2014-03-31 16:52:10


 

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

meter定义和用法

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

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

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

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

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

High:当前标量的高值区。

Optimum:最佳值;其范围在最小值与最大值区间当中,并且可以处于高值区。

Input 类型- range定义

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

range 类型显示为滑动条。

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

实例

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

属性值描述

max number 规定允许的最大值

min number 规定允许的最小值

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

value number 规定默认值
CSS部分

#box{position: relative;}

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

.meter_box meter{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: 20px auto;height: 30px;overflow: hidden;}

.input_box input{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:1px 1px 1px #fff;background-color: #ee4d73;line-height: 85px;text-align: center;border-radius: 50px;}
HTML部分

<p class="meter_box">

<span>项目二:</span>

<meter value="5" min="0" max="100" title="num" low="20" high="80" optimum="50"></meter>

<b id="value_text">5</b>

</p>

<div class="input_box">

<span>项目一:</span>

<input type="range" name="points" min="0" max="100" value="5">

</div>

<div class="notice_text">拉动项目一的值,查看项目二的效果</div>
JS部分

var points=document.getElementsByName("points")[0]

,meter=document.getElementsByTagName("meter")[0];

document.getElementById("value_text").innerHTML=points.value;

points.onchange=function(){

meter.value=points.value;

document.getElementById("value_text").innerHTML=meter.value;

var num=parseInt(meter.value);

if(19<num && num<81){

document.getElementById("value_text").style.color="#65ab07";}else{

document.getElementById("value_text").style.color="#fadd0d";} }

注意:JS是需在HTML代码下面的,如果在上面的话是无效的!


 
分享按钮