HTML5 progress和meter控件_动力节点Java学院整理


Posted in HTML / CSS onJuly 06, 2017

在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>

HTML5 progress和meter控件_动力节点Java学院整理

示例2:含有max属性

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

HTML5 progress和meter控件_动力节点Java学院整理

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

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

IE8:显示文本内容。

IE11:显示一个从左到右的动画效果。

Chrome:显示一个从左到右,然后从右到左的动画效果。

HTML5 progress和meter控件_动力节点Java学院整理

<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:无属性

HTML5 progress和meter控件_动力节点Java学院整理

进度:<meter></meter>

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

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

HTML5 progress和meter控件_动力节点Java学院整理

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

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

HTML5 progress和meter控件_动力节点Java学院整理

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

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

HTML5 progress和meter控件_动力节点Java学院整理

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

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

HTML5 progress和meter控件_动力节点Java学院整理

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

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

HTML5 progress和meter控件_动力节点Java学院整理

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

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

HTML5 progress和meter控件_动力节点Java学院整理

示例8:value < high

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

HTML5 progress和meter控件_动力节点Java学院整理

示例9:value = high

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

HTML5 progress和meter控件_动力节点Java学院整理

示例10:value > high

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

HTML5 progress和meter控件_动力节点Java学院整理

示例11:value < low

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

HTML5 progress和meter控件_动力节点Java学院整理

示例12:value = low

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

HTML5 progress和meter控件_动力节点Java学院整理

示例13:value > low

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

HTML5 progress和meter控件_动力节点Java学院整理

示例14:optimum < low < value < high

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

HTML5 progress和meter控件_动力节点Java学院整理

示例15:low < optimum = value < high

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

 

HTML5 progress和meter控件_动力节点Java学院整理

示例16:low < value < high < optimum

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

HTML5 progress和meter控件_动力节点Java学院整理

示例17:value < low < high < optimum

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

HTML5 progress和meter控件_动力节点Java学院整理

示例18:optimum < low < high < value

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

HTML5 progress和meter控件_动力节点Java学院整理

以上所述是小编给大家介绍的HTML5 progress和meter控件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
详解css3使用transform出现字体模糊的解决办法
Oct 16 HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 HTML / CSS
HTML5 embed 标签使用方法介绍
Aug 13 HTML / CSS
html5 canvas fillRect坐标和大小的问题解决方法
Mar 26 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
吃透移动端 Html5 响应式布局
Dec 16 HTML / CSS
html5利用canvas实现颜色容差抠图功能
Dec 23 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
Jul 06 #HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 #HTML / CSS
html5 localStorage本地存储_动力节点Java学院整理
Jul 06 #HTML / CSS
html5 sessionStorage会话存储_动力节点Java学院整理
Jul 06 #HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 #HTML / CSS
html5嵌入内容_动力节点Java学院整理
Jul 07 #HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 #HTML / CSS
You might like
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
JavaScript 在网页上单击鼠标的地方显示层及关闭层
2012/12/30 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
JavaScript字符串对象slice方法入门实例(用于字符串截取)
2014/10/16 Javascript
jquery实现的仿天猫侧导航tab切换效果
2015/08/24 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
js添加千分位的实现代码(超简单)
2016/08/01 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
Javascript 链式作用域详细介绍
2017/02/23 Javascript
angularJS 发起$http.post和$http.get请求的实现方法
2017/05/18 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
2018/09/29 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
2019/04/30 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
解决Vue大括号字符换行踩的坑
2020/11/09 Javascript
python模块restful使用方法实例
2013/12/10 Python
python实现每次处理一个字符的三种方法
2014/10/09 Python
python socket多线程通讯实例分析(聊天室)
2016/04/06 Python
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python SMTP发送邮件遇到的一些问题及解决办法
2018/10/24 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
使用openCV去除文字中乱入的线条实例
2020/06/02 Python
详解快速开发基于 HTML5 网络拓扑图应用
2018/01/08 HTML / CSS
项目施工员岗位职责
2014/03/09 职场文书
小学数学国培感言
2014/03/10 职场文书
简历中个人自我评价分享
2014/03/15 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
2014年业务工作总结
2014/11/17 职场文书
英语感谢信范文
2015/01/20 职场文书
Windows Server 2016服务器用户管理及远程授权图文教程
2022/08/14 Servers