<%@ 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.οnlοad=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
视频资料