HTML5 progress和meter控制

日期:2020-10-13 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

在HTML5中,新增了progress和meter控制。progress控制为进度条控制,可表明每日任务的进度,如Windows系统软件中手机软件的安裝、文档的拷贝等情景的进度。meter控制为计量条控制,表明某种计量,可用于温度、净重、额度等量化分析的主要表现。

<progress> 进度条

表明:表明每日任务的进度,如Windows系统软件中手机软件的安裝、文档的拷贝等情景的进度。

特点

英语的语法:

 <progress value="0.5">50%</progress>

特性:

max{number} :设定或获得进度条的最大值。

  缺省值:未设置此特性时,控制最大值为1。

value{number} :设定或获得进度条确当前值。

  缺省值:未设定此值时,此进度条为'不确定性'型,无实际进度信息内容;无max特性时(进度条默认设置最高为1),value的默认设置赋值范畴为0.01~1.0,设定0.2时表明20%的进度。最低访问器版本号适用:IE 10、Chrome 8

控制內容:当访问器不适用此控制时,将显示信息控制里的內容,适用此控制的访问器不容易展现控制的內容。

示例1:含有value特性

 进度:<progress value="0.25" >25%</progress>

示例2:含有max特性

 进度:<progress max="100" value="25" >25%</progress> 

示例3:不确定性进度条(无value特性)

 进度:<progress >正在免费下载...</progress>

IE8:显示信息文字內容。

IE11:显示信息1个从左到右的动漫实际效果。

Chrome:显示信息1个从左到右,随后从右到左的动漫实际效果。

<meter> 计量条

表明:表明某种计量,可用于温度、净重、额度等量化分析的主要表现。特点

英语的语法:

 进度:<meter value="0.5"></meter>

特性:

value{number} :设定或获得此控制的值,务必要在min与max值的正中间。

max{number}:设定此控制的最大值。

  缺省值:未设置此特性时,控制最大值为1。

min{number}:设定此控制的最少值。

  缺省值:未设置此特性时,控制最少值为0。

low{number}:设定过底的阀值,当value小于low并超过min时,显示信息太低的色调。

high{number}:设定太高的阀值,当value超过high并小于max时,显示信息太高的色调。

optimum{number}:设定最好值,

最低访问器版本号适用:IE 不适用、Chrome 8

控制內容:当访问器不适用此控制时,将显示信息控制里的內容,适用此控制的访问器不容易展现控制的內容。

示例1:无特性

 进度:<meter></meter> 

示例2:value < max(max默认设置为1.0)

 进度:<meter value="0.5"></meter> 

示例3:value = max(max默认设置为1.0)

 进度:<meter value="1"></meter> 

示例4:value > max(max默认设置为1.0)

 进度:<meter value="5"></meter> 

示例5:value < min(min默认设置为0)

 进度:<meter value="-0.5"></meter>

示例6:value = min(min默认设置为0)

 进度:<meter value="0"></meter> 

示例7:value > min(min默认设置为0)

 进度:<meter value="0.5"></meter> 

示例8:value < high

 进度:<meter value="0.5" high="0.8"></meter>

示例9:value = high

 进度:<meter value="0.8" high="0.8"></meter> 

示例10:value > high

 进度:<meter value="0.9" high="0.8"></meter> 

示例11:value < low

进度:<meter value="0.1" low="0.25"></meter> 

示例12:value = low

 进度:<meter value="0.25" low="0.25"></meter> 

示例13:value > low

 进度:<meter value="0.5" low="0.25"></meter>

示例14:optimum < low < value < high

 进度:<meter low="0.25" optimum="0.15" high="0.75" value="0.5"></meter> 

示例15:low < optimum = value < high

 进度:<meter low="0.25" optimum="0.5" high="0.75" value="0.5"></meter> 

 

示例16:low < value < high < optimum

 进度:<meter low="0.25" optimum="0.85" high="0.75" value="0.5"></meter> 

示例17:value < low < high < optimum

 进度:<meter low="0.25" optimum="0.85" high="0.75" value="0.2"></meter> 

示例18:optimum < low < high < value

 进度:<meter low="0.25" optimum="0.2" high="0.75" value="0.8"></meter>

以上所述是网编给大伙儿详细介绍的HTML5 progress和meter控制,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

上一篇:html5嵌入內容 返回下一篇:没有了