求大神帮我设计一个类似于ATM机的那样的JAVA WEB前台网页。。。
就像上面的两个图似的，希望哥哥姐姐们能帮我做一个类似于这样的网页，也用不着特别的美化，差不多像个样子就行。小弟需要在这样的服务端进行系统调试，但是前台没有怎么学过，所以希望大家帮帮忙！
PS:最好有个CSS样式表，.jsp格式的网页最好，.HTML的也可以，只要做出静态页面就好了
第1个回答 2014-03-19
<!DOCTYPE html>
<html>
<head>
<title>ATM</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style type="text/css">
.maindiv{
width:50%;
height:350px;
background-color:#9999ff;
border:solid 1px #000;
}
.leftdiv{
width:70%;
height:80%;
background-color:#FFF;
border:solid 1px #000;
margin:30px 0 0 30px;
float:left;
text-align:center;
}
.rightdiv{
width:20%;
height:80%;
margin:20px 0 0 0;
float:left;
}
.rightdiv input{
width:90%;
margin:10px 0 10px 20px;
height:50px
}
</style>
<script type="text/javascript">
window.onload=function(){
var statusb=document.getElementById("status"),
searchb=document.getElementById("search"),
payfor=document.getElementById("payfor"),
cpassword=document.getElementById("cpassword"),
displayWindow=document.getElementById("displayWindow");
if (window.addEventListener) {
// safari, chrome, firefox
//addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
// useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true
statusb.addEventListener("click", showUStatus);
searchb.addEventListener("click", showSearch);
payfor.addEventListener("click", showPay);
cpassword.addEventListener("click", showChange);
} else { // IE opera
statusb.attachEvent("onclick", showUStatus);
statusb.attachEvent("onclick", showSearch);
payfor.addEventListener("click", showPay);
cpassword.addEventListener("click", showChange);
}
}
;
function showUStatus(){
document.getElementById("displayWindow").innerHTML="姓名 : xx</br>年龄 : 22 性别 : xx";
}
function showSearch(){
document.getElementById("displayWindow").innerHTML="余额 : 10000000 RMB</br>土豪!我们做朋友吧";
}
function showPay(){
document.getElementById("displayWindow").innerHTML=" <form>充值金额 :<input type='text' name='money'/><input type='submit' value='提交'></form>";
}
function showChange(){
document.getElementById("displayWindow").innerHTML=" <form>新密码 :<input type='text' name='newPWord'/><input type='submit' value='提交'></form>";
}
</script>
</head>
<body>
<div class="maindiv">
<div id="displayWindow" class="leftdiv">欢迎使用xxxIC系统</div>
<div class="rightdiv"><input id="status" type="button" value="用户状态"/></br><input id="search" type="button" value="余额查询"/></br><input id="payfor" type="button" value="充值缴费"/></br><input id="cpassword" type="button" value="修改密码"/></div>
</div>
</body>
</html>
<html>
<head>
<title>ATM</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style type="text/css">
.maindiv{
width:50%;
height:350px;
background-color:#9999ff;
border:solid 1px #000;
}
.leftdiv{
width:70%;
height:80%;
background-color:#FFF;
border:solid 1px #000;
margin:30px 0 0 30px;
float:left;
text-align:center;
}
.rightdiv{
width:20%;
height:80%;
margin:20px 0 0 0;
float:left;
}
.rightdiv input{
width:90%;
margin:10px 0 10px 20px;
height:50px
}
</style>
<script type="text/javascript">
window.onload=function(){
var statusb=document.getElementById("status"),
searchb=document.getElementById("search"),
payfor=document.getElementById("payfor"),
cpassword=document.getElementById("cpassword"),
displayWindow=document.getElementById("displayWindow");
if (window.addEventListener) {
// safari, chrome, firefox
//addEventListener(string eventFlag, function eventFunc, [bool useCapture=false])
// useCapture: 指定是否绑定在捕获阶段，true为是，false为否，默认为true
statusb.addEventListener("click", showUStatus);
searchb.addEventListener("click", showSearch);
payfor.addEventListener("click", showPay);
cpassword.addEventListener("click", showChange);
} else { // IE opera
statusb.attachEvent("onclick", showUStatus);
statusb.attachEvent("onclick", showSearch);
payfor.addEventListener("click", showPay);
cpassword.addEventListener("click", showChange);
}
}
;
function showUStatus(){
document.getElementById("displayWindow").innerHTML="姓名 : xx</br>年龄 : 22 性别 : xx";
}
function showSearch(){
document.getElementById("displayWindow").innerHTML="余额 : 10000000 RMB</br>土豪!我们做朋友吧";
}
function showPay(){
document.getElementById("displayWindow").innerHTML=" <form>充值金额 :<input type='text' name='money'/><input type='submit' value='提交'></form>";
}
function showChange(){
document.getElementById("displayWindow").innerHTML=" <form>新密码 :<input type='text' name='newPWord'/><input type='submit' value='提交'></form>";
}
</script>
</head>
<body>
<div class="maindiv">
<div id="displayWindow" class="leftdiv">欢迎使用xxxIC系统</div>
<div class="rightdiv"><input id="status" type="button" value="用户状态"/></br><input id="search" type="button" value="余额查询"/></br><input id="payfor" type="button" value="充值缴费"/></br><input id="cpassword" type="button" value="修改密码"/></div>
</div>
</body>
</html>
相似回答