<%@ 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)将请求到的值通过比例转换成最内层的宽度【宽度随着下载进度的增加而增长】
运行结果：
原文链接：https://www.f2er.com/ajax/162818.html
