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

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

标签：

Html5 JavaScript CSS3

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

<!DOCTYPE html>
<html>
<head>
	<title>进度条演示</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{
			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);
		}
		
	</style>
</head>
<body>
	<div class="main">
		<div class="newMain"></div>
	</div>
		<script type="text/javascript">
		var len = document.querySelector(".newMain");
		function collectSceonds(lenWidth){
			if(typeof lenWidth == "number"){
				var n = parseInt(lenWidth/10/4);
				len.style.transition = "width "+n+"s ease-out";
				len.style.width = lenWidth+"%";
				return true;
			}
			return false;
		}
	</script>
</body>
</html>
## 这里解释一下collectSceonds函数
接收一下要改变的进度条的长度（百分比）填整数就行，函数内部自动转换为百分比
这个函数可以干什么呢


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

点击查看更多内容