html-progress meter

状态交互元素   <progress>

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

<progress> 属性

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

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

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

实例：

开始下载


<script>
var intnum=0;
var intTimer;
var tid=document.getElementById("pid")
var loadfile=document.getElementById("loadFile")
function Interval_handler(){
	intnum++;
	loadfile.value=intnum;
	if(intnum>=loadfile.max){
		clearInterval(intTimer);
		tid.innerHTML="下载完成";
	}else{
		
		tid.innerHTML="正在下载"+intnum+"%";
	}
}
function btn_click(){
	
	intTimer=setInterval(Interval_handler,100);
}

</script>

<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之间

<meta>元素中的optimum 的属性值，表示的是最佳数量值。如果该值比属性"high"值大，表示实际值越高越好；如果该值比属性"low"值小，则表示实际值越低越好