html-progress meter

来源：互联网发布：期货交易软件有哪些编辑：程序博客网时间：2024/05/29 08:05

状态交互元素 <progress>

<progress> 是html5新增的状态交互元素，用来表示页面中的某个任务完成的进度（进程）。展示的方式既可以是整数(1-100),也可以是百分比(1%-100%)

<progress> 属性

max 整数或浮点型设置完成时的值，表示总体工作量

value 整数或浮点型设置正在进行时的值，表示已完成的工作量

<progress>中的设置的"value"值必须小于或等于"max"属性值，且两者都必须大于0

实例：

<progress>元素的默认外观样式取决于浏览器，并且很大程度上依赖于底层的操作系统的UI样式。我们可以通过CSS来自定义<progress>的样式

1>宽高可以直接对progress的宽高进行设置 progress{width:300px; height:20px;}

在Firefox和IE浏览器中，宽度和高度都是可以改变的，但是在webkit浏览器中只能改变宽度，而高度不能改变。为了让它的外观可以在Chrome,Sarari和Opera浏览器中可以修改，我们需要重置 -webkit-appearance属性。

progress{-webkit-appearance:none; width:300px; height:20px;} 发现webkit内核浏览器中，原来的底条由白色变成灰暗色，原本的进度由蓝色变成了暗绿色；

但是IE等其他的浏览器中的颜色却没有变化，如果需要他们变成一样

progress {
-webkit-appearance: none; -moz-appearance: none; appearance: none;
width: 200px; height: 20px;
background-color: #888; border: none;
color: green;
}
progress::-webkit-progress-bar, progress::-moz-progress-bar, progress::progress-bar {
background-color: green;
}
progress::-moz-progress-bar {
background-color: green;
}

2>颜色 IE通过 progress::-ms-fill {} 进行设置颜色，而Webkit内核的浏览器通过 progress::webkit-progress-bar {}

而Firefox浏览器使用background属性进行设置；

进度条的设置，在Firefox中使用 progress::webkit-progress-bar {},Webkit内核的浏览器通过 progress::webkit-progress-value{},在IE10以上浏览器中，它的颜色通过color属性属性设置。

<meter> 是html5新增的元素，表示在一定数量范围内的值，<meter>帮助浏览器识别html中的数量，而不对该数量做任何的格式修饰

<meter>属性

value 数量定义元素明显的实际值，可以用浮点型，默认为0

min 数量定义元素显示的最小值，默认为0

max 数量定义元素显示的最大值，默认为1

low 数量定义元素显示的最低值，该值小于或等于min

high 数量定义元素显示的最低值，该值小于或等于max

optimum 数量定义元素显示的最优值，该值必须在min与max之间

0 1