ajax实现进度条的功能

发布时间：2020-12-16 01:50:08 所属栏目：百科来源：网络整理

导读：%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"htmlheadmeta http-equiv="Content-Type" content="text/htm

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>download status</title>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery.min.js"></script>
<script
	src="${pageContext.request.contextPath}/js/bootstrap/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
	$(function() {
		var percentage = "${percentage}";
		var contentwidth = percentage*100;
		$("#content").css("width",contentwidth);
		//定时请求刷新
		setInterval(runajax,10000);
	});
	//ajax方法执行
	function runajax(){
		$.ajax({
			"url":"getNumber.shtml","dataType":"json","type":"post","async":"true"
		}).success(function(data){
			var percentage=data.percentage;
		    var contentwidth=percentage*100;
		    //css用来设置style里面的属性，attr用来设置元素的属性值
		    $("#content").css("width",contentwidth);
		}).error();
	}
</script>
<body>
	<div id="progressbar" style="width:100px;height:20px;border:2px solid black" >
	<div id="content" style="height:20px;background:yellow"></div>
	</div>
</body>
</html>

(1)首先将两个div嵌套在一起，然后把两个div的宽度设置为固定值。

(2)通过ajax向后台请求下载进度。

(3)将请求到的值通过比例转换成最内层的宽度【宽度随着下载进度的增加而增长】

运行结果：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!