【js实现进度条】

功能

使用定时器实现进度条功能

效果

代码

 		<style>
			div {
				width: 100px;
				height: 20px;
			}

			#p2 {
				position: relative;
				/*相对自己定位向右移动45px*/
				left: 45px;
				color: white;
			}
		</style>
		<div id="d2" style="background-color: black;">
			<div id="d3" style="background-color: green;">
				<p id="p2"></p>
			</div>
		</div>
		<script>
			var min = 0, //文本值最小范围
				max = 100, //文本值最大范围
				current, fps = 60; //60是计时器一秒刷新次数

			var init = function(value, callback) { //初始化函数
				document.getElementById('p2').innerHTML = value; //设置p初始文本
				document.getElementById('d3').style.width = value + 'px'; //设置上层div宽度
				current = value; //设置当前值
				if (callback instanceof Function) { //设置回调函数
					callback();
				}
			}
			var run = function() { //刷新进度条
				run.si = setInterval(function() {
					++current;
					if (current > max) { //进度条满，移除定时器
						clearInterval(run.si);
						return false;
					}
					document.getElementById('p2').innerHTML = current; //设置p文本
					document.getElementById('d3').style.width = current + 'px'; //设置上层div宽度
				}, 1000 / fps);
			}
			window.onload = function() {
				init(min, run);
			}
		</script>

总结

很好的实现进度条功能，未在文本后面添加%