结对项目（持续更新，更新内容顶部）
队友博客地址 ：http://www.cnblogs.com/LeoSunhailin/
1.复利计算最终版本已经上传到队友博客
基本功能是：7个模块的计算，1个模块的动态显示单利与复利的计算
动态显示时可以进行对数据的修改和删除
App或者微信版本尚未成功
近期在学习使用hibernate框架，使用于复利网页版，代码将会大幅度减少，整体思路会更加清晰，敬请期待- -
***上图为根据数据库内列表数，按每五行分一页，多出的行数会自动生成第二页显示
***上图为动态显示分页列表按钮
4.8 星期五 复利计算分页动态更新显示已完成如上
计算模块
加载完毕焦点出现在输入框
body onload="win()">
<div class="navigation">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed"
data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span> <span
class="icon-bar"></span> <span class="icon-bar"></span> <span
class="icon-bar"></span>
</button>
<a class="navbar-brand" href="fuli.jsp"><strong>投资计算器</strong></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class=""><a href="#">Funciton Comming Soon<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</div>
</nav>
</div>
<div id="TabMain">
<div class="tabItemContainer">
<li><a href="fuli.jsp" class="tabItemCurrent">复利计算</a></li>
<li><a href="danli.jsp">单利计算</a></li>
<li><a href="benjin.jsp">求初值</a></li>
<li><a href="gupiao.jsp">股票收益</a></li>
<li><a href="lilv.jsp">求报酬率</a></li>
<li><a href="dingtou.jsp">定投计算</a></li>
<li><a href="daikuan.jsp">贷款</a></li>
<li><a href="list.jsp">投资报表</a></li>
</div>
<div class="tabBodyContainer">
<div class="tabBodyItem tabBodyCurrent">
<p>欢迎使用投资计算器</p>
<form id = "form1" action="DataServlet" method = "post" >
<table class="table">
<tr >
<td width="100" class="labelTd">
<span class="red">*</span>本金：
</td>
<td>
<input class="form-control" name="startMoney" onblur="isnum()" id="num1" value ="">
<span class="errorMsg"></span>
</td>
</tr>
<tr >
<td class="labelTd">
<span class="red">*</span>存的年数：
</td>
<td>
<input class="form-control" name="years" onblur="isnum()" id="num2" value = "">
<span class="errorMsg"></span>
</td>
</tr>
<tr>
<td class="labelTd">
<span class="red">*</span>利率：
</td>
<td>
<input class="form-control " placeholder="请输入您的利率 3%=0.03" name="r" onblur="isnum()" id="num3" value = "">
<span class="errorMsg"></span>
</td>
</tr>
<tr>
<td class="labelTd">
<span class="red">*</span>终值：
</td>
<td>
<input class="form-control" name="endMoney" id="endMoney" readonly="true" value = "">
<span class="errorMsg"></span>
</td>
</tr>
<tr>
<td class="labelTd">
<input class="btn btn-success" type="submit" value="重置" onclick="cls()">
</td>
<td>
<input class="form-control btn btn-success" type="submit" value="计算" onclick="add()" >
</td>
</tr>
</table>
</form>
</div>
<div class="tabBodyItem">
<p></p>
</div>
<div class="tabBodyItem">
<p></p>
</div>
<div class="tabBodyItem">
<p></p>
</div>
<div class="tabBodyItem">
<p></p>
</div>
<div class="tabBodyItem">
<p></p>
</div>
<div class="tabBodyItem">
<p></p>
</div>
<div class="tabBodyItem">
<p></p>
</div>
</div>
</div>
<hr />
<div class="footer">
<div class="footer_media_test">
<p>©2016-2016 孙海林 江志彬 版权所有</p>
<p>信息：广州商学院 商软2班 223/225</p>
<p>The First Version</p>
<p>联系方式: 你猜猜</p>
</div>
</div>
上面代码为界面界面的设计，效果图如下，运用了bootstrap，和css样式
function cls(){ document.getElementById("num1").value=""; document.getElementById("num2").value=""; document.getElementById("num3").value=""; document.getElementById("endMoney").value=""; } function isnum(){ if(isNaN(document.getElementById("num1").value)){ document.getElementById("num1").style.color='#FF0000'; document.getElementById("num1").focus(); } else{ document.getElementById("num1").style.color='#000000'; } if(isNaN(document.getElementById("num2").value)){ document.getElementById("num2").style.color='#FF0000'; document.getElementById("num2").focus(); } else{ document.getElementById("num2").style.color='#000000'; } if(isNaN(document.getElementById("num3").value)){ document.getElementById("num3").style.color='#FF0000'; document.getElementById("num3").focus(); } else{ document.getElementById("num3").style.color='#000000'; } if(isNaN(document.getElementById("endMoney").value)){ document.getElementById("endMoney").style.color='#FF0000'; document.getElementById("endMoney").focus(); } else{ document.getElementById("endMoney").style.color='#000000'; } } $(document).ready(function(e) { SidebarTabHandler.Init(); }); var SidebarTabHandler = { Init : function() { $(".tabItemContainer>li").click( function() { $(".tabItemContainer>li>a").removeClass( "tabItemCurrent"); $(".tabBodyItem").removeClass("tabBodyCurrent"); $(this).find("a").addClass("tabItemCurrent"); $($(".tabBodyItem")[$(this).index()]).addClass( "tabBodyCurrent"); }); } };
第一个function（）是重置按钮
第二个function（）判断输入是否错误，输入错误则不能输入下一行
第三个function（）是界面右边功能栏的转换
目前还有动态显示模块的功能尚未做好，如下图
需要实现每五个分到下一页，用到了jQuery中的pagination分页插件和基本jQuery知识
本人主要负责界面，就是前段的设计和与同伴后台服务器数据库数据之间的传输
