H5+JS+CSS3完成自动适配时间来完成进度条滚动

这里布局一下基本样式和基本架构

	
	
	
		*{
			margin:0;
			padding: 0;
		}
		.main{
			position: relative;
			width:80%;
			margin-left:10%;
			border:1px solid rgba(0,0,0,.5);
			border-radius: 3px;
			height: 30px;
		}
		.main div{
			position: absolute;
			left:0;
			width:0;
			height: 100%;
			background: rgba(0,255,0,.5);
		}
		
	


	
		
	
		


## 这里解释一下collectSceonds函数
接收一下要改变的进度条的长度（百分比）填整数就行，函数内部自动转换为百分比
这个函数可以干什么呢


var n = parseInt(lenWidth/10/(lenWidth/10));	这个表示完成width时间，以此来自动调节进度条滚动
的数率，不再死板
				len.style.transition = "width "+n+"s ease-out";
				len.style.width = lenWidth+"%";
				这两段代码不用多说了，直接可以看得懂
差不多就这样吧