图形化进度条
<%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <style type="text/css"> #outer{ width:200px; height:25px; border:1px solid red; padding:2px; } #inner{ width:10%; height:100%; background-color:green; } </style> <script type="text/javascript"> var i = 0; var auto_advance = window.setInterval("advance()", 100); function advance(){ i++; if(i<100){ document.getElementById("inner").style.width=i+"%"; document.getElementById("progress").innerHTML=i+"%"; }else{ window.clearInterval(auto_advance); document.getElementById("progress").innerHTML="完成! "; } } </script> </head> <body> <div id="outer" > <div id="inner" ></div> </div> <div id="progress"></div> </body> </html>
struts2结合javascript实现
<%@ page language="java" pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta http-equiv="refresh" content="1;url=/struts_review08/test/wait.action"> <style type="text/css"> #outer { width: 200px; height: 25px; border: 1px solid red; padding: 2px; } #inner { width: 0%; height: 100%; background-color: green; } </style> <script type="text/javascript"> var i = <s:property value="progress"/>; window.onload=function(){ if(i<100){ document.getElementById("inner").style.width=i+"%"; document.getElementById("progress").innerHTML=i+"%"; }else{ window.clearInterval(auto_advance); document.getElementById("progress").innerHTML="完成!"; } }; </script> </head> <body> <div id="outer"> <div id="inner"></div> </div> <div id="progress"></div> </body> </html>
下载更多SSH视频资料