结对项目（持续更新，更新内容顶部）

 队友博客地址 ：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知识

 

本人主要负责界面，就是前段的设计和与同伴后台服务器数据库数据之间的传输