HTML+JS实现进度条

1.定义元素

        首先定义一个初始div元素，指定进度条的样式，如：长度、宽度、边框！！！！。然后再内部定义一个div用来显示进度。

<style type="text/css">
		.processBox {
		width: 450px;
		border: 1px solid #6C9C2C;
		height: 25px;
	}

	#processbar {
		background: #95CA0D;
		float: left;
		height: 100%;
		text-align: center;
		line-height: 150%;
	}
</style>
<div class="processBox">
	<div id="processbar" style="width:0%;"></div>
</div>

 2.编写进度条逻辑

        这里分四个步骤：a. 获取进度条元素  b. 更新进度条元素长度    c. 更新显示文本   d. 判断是否完成。

<script type="text/javascript">
	function setProcess() {
		//获取进度条元素
		var processbar = document.getElementById("processbar");
		//更新进度条长度
		processbar.style.width = parseInt(processbar.style.width) + 1 + "%";
		//将宽度更新到dom元素中(文本)
		processbar.innerHTML = processbar.style.width;
		if (processbar.style.width === "100%") {
			//清除计时器
			window.clearInterval(bartimer);
			}
		}
		//计时器，每1/10秒执行一次
		var bartimer = window.setInterval(function() {
			setProcess();
	}, 100);
	//页面加载时调用
	window.onload = function() {
			bartimer;
	}
</script>