前端页面简单添加进度条

前端添加进度条

具体步骤如下：

• 前端代码：在页面添加下面代码

<div class="processcontainer" title="正在处理，请耐心等候...">
	<div id="processbar" style="width:0%"></div>
</div>

• 进度条样式：如果认为样式不太好，可以自己调试改动

<style type="text/css">
			.processcontainer{
				width:350px;
				border:1px solid #999a9c;
				height:22px;
				/* background:transparent; */
				background:rgba(0,0,0,0.2);
				position:fixed;
				margin:auto;
				left:0;
				right:0;
				top:0;
				bottom:0;
				z-index:1;
				display:none;
			}
			.processcontainer::before{
				content:'';
				position:fixed;
				width:100%;
				height:100%;
				left:0;
				top:0;
				background:rgba(0,0,0,0.2);
			}
			#processbar{
				background:#2d8cf0;
				float:left;
				height:100%;
				text-align:center;
				line-height:150%;
			}
	</style>

• 请求后台接口的js方法：此处需要单独写相应的后台接口来实现

/**
 * 获取当前进度
 * @returns
 */
function setProcess(){
	$.ajax({
		url : "xx/getSession",
		type : "post",
		data : [],
		success : function(result) {
			var processbar = document.getElementById("processbar");
			processbar.style.width = result.obj + "%";
			processbar.innerHTML = parseInt(processbar.style.width) + "%";
			/*if(processbar.style.width == "100%"){}*/
		},
		error : function(errInfo) {
			layer.alert("获取进度失败！");
		}
	})
}

• 关闭进度条js方法：

/**
 * 关闭进度条
 * @returns
 */
function closeProcess(){
	window.clearInterval(bartimer);
    $(".processcontainer").hide();
    $("#processbar").css("width","0%");
    $("#processbar").html("");
    return;
}

• 页面调用获取进度条的方法，添加定时器，重复执行setProcess方法：

 	//定时请求后台获取进度session值
	bartimer = window.setInterval(function(){setProcess();},2000);//注意bartimer 为全局变量
 	$(".processcontainer").show();

• 后台接口代码很简单，获取session中的进度数字值：

/**
	 * 获取实时进度
	 * @param session
	 * @return
	 */
	@RequestMapping(value = "/getSession", method = RequestMethod.POST)
	@ResponseBody
	public JsonResult getSession(HttpSession session){
		try {
			String count = (String) session.getAttribute(Constants.SESSION_PLRXBK);
			return new JsonResult(true,"请求成功！",count); 
		} catch (Exception e) {
			return new JsonResult(false,"获取进度失败！");
		}
	}