SOURCE

//计算月还款本息的工具对象
var loanTool = {
    /**
     * 计算并返回月还款本息的方法
     * @param loanAmount            贷款本金(也就是贷了多少款，比如，70万)
     * @param months                还款月数(也就是贷款周期，如20年，则此处为240个月)
     * @param annualInterestRate    年利率(比如，6.55%，则此处传入为6.55,应除以100以后转为0.0665再进行计算)
     */
    getPaymetnsPerMonth: function (loanAmount, months, annualInterestRate) {
        // 等额本息还款法计算公式：
        // -- 月还款本息=〔贷款本金×月利率×（1＋月利率）＾还款月数〕÷〔（1＋月利率）＾还款月数－1〕
        // -- 月利率=年利率÷12=0.0665÷12=0.005541667
        // -- 其中＾符号表示乘方
        var rateOfMonth = annualInterestRate / (12 * 100);
        // 将计算所得的月还款金额(本息)返回
        return (loanAmount * rateOfMonth * Math.pow((1 + rateOfMonth), months)) / (Math.pow((1 + rateOfMonth), months) - 1);
    }
};
//选项卡切换
$(function () {
    $("#tabs .title").find("li").each(function (index) {
        $(this).on("click", function () {
            $(this).siblings().find("a").removeClass("current");
            $(this).find("a").addClass("current");

            $("#content>div").eq(index).fadeIn().siblings().stop().hide();
        });
    });

    //计算方式
    $("#way input[type=radio]").on("change", function () {
        $(this).parents("dt").next().slideDown().siblings("dd").slideUp();
    });

    // 贷款利率----------------------------------------------------------------
    var loanRate = [
        ["6.80", "6.55", "6.15", "5.90"],
        ["4.70", "4.50", "4.25", "4.00"]
    ];

    function Interest() {
        var row = $("#myform input[name=dktype]:checked").val();
        var col = $("#myform select[name=dkll]").val();
        $("#myform input[name=dkll]").val(loanRate[row][col]);
    }

    Interest();
    $("#myform input[name=dktype]").on("change", function () {
        Interest();
    });
    $("#myform select[name=dkll]").on("change", function () {
        Interest();
    });
    /**
     *
     */
    $("#myform input[name=jsfs]").on("change", function () {
        $(this).parent().next().slideDown();
        $(this).parent().siblings("dt").next().hide();
    });

    $("#myform input[name=startCalc]").on("click", function () {
        var calcMode = $("#myform input[name=jsfs]:checked").val();

        switch (calcMode) {
            case "0":

                showLoanInfo(calcByAreaAndPrice());
                break;
            case "1":
                showLoanInfo(calcByLoanTotal());
                break;
        }
    });
    function calcByAreaAndPrice() {
        var loanInfo = {};

        var houseMoneyTotal = parseFloat($("#myform input[name=price]").val()) * parseFloat($("#myform input[name=area]").val());

        loanInfo.houseMoneyTotal = houseMoneyTotal;

        var ajcs = $("#myform select[name=ajcs]").val();
        var loanTotal = houseMoneyTotal * (parseInt(ajcs) / 100);
        loanInfo.loanTotal = loanTotal;
        loanInfo.initialPayment = houseMoneyTotal - loanTotal;

        var repaymentMonths = $("#myform select[name=ajns]").val();
        loanInfo.repaymentMonths = repaymentMonths;

        var interestRate = $("#myform input[name=dkll]").val();
        var repaymentPerMonth = loanTool.getPaymetnsPerMonth(loanTotal, repaymentMonths, interestRate);
        loanInfo.repaymentPerMonth = repaymentPerMonth;

        loanInfo.repaymentTotal = repaymentPerMonth * repaymentMonths;

        loanInfo.interestTotal = loanInfo.repaymentTotal - loanInfo.loanTotal;

        return loanInfo;
    }

    // 根据贷款总额计算贷款数据
    function calcByLoanTotal() {
        var loanInfo = {};

        // 计算房款总额：略
        loanInfo.houseMoneyTotal = "略";

        // 计算贷款总额
        var loanTotal = parseFloat($("#myform input[name=dkze]").val());
        loanInfo.loanTotal = loanTotal;

        // 计算首期付款：无
        loanInfo.initialPayment = 0;

        // 计算贷款月数：
        var repaymentMonths = $("#myform select[name=ajns]").val();
        loanInfo.repaymentMonths = repaymentMonths;

        // 计算月均还款额
        var interestRate = $("#myform input[name=dkll]").val();
        var repaymentPerMonth = loanTool.getPaymetnsPerMonth(loanTotal, repaymentMonths, interestRate);
        loanInfo.repaymentPerMonth = repaymentPerMonth;

        // 计算还款总额：月均还款额 * 贷款月数
        loanInfo.repaymentTotal = repaymentPerMonth * repaymentMonths;

        // 计算支付利息：还款总额 - 贷款总额
        loanInfo.interestTotal = loanInfo.repaymentTotal - loanInfo.loanTotal;

        return loanInfo;
    }

    // 显示最终贷款信息
    function showLoanInfo(loanInfo) {
        $("#myform input[name=fousex]").val(loanInfo.houseMoneyTotal)
        $("#myform input[name=loan]").val(loanInfo.loanTotal.toFixed(2))
        $("#myform input[name=refund]").val(loanInfo.repaymentTotal.toFixed(2))
        $("#myform input[name=pay]").val(loanInfo.interestTotal.toFixed(2))
        $("#myform input[name=first]").val(loanInfo.initialPayment.toFixed(2))
        $("#myform input[name=month]").val(loanInfo.repaymentMonths)
        $("#myform input[name=average]").val(loanInfo.repaymentPerMonth.toFixed(2))
    }
});

<div id="box">
    <h2>贷款计算器作业</h2>
    <div id="tabs">
        <ul class="title">
            <li><a href="#" data-cid="contact" class="current">贷款计算器</a></li>
            <li><a href="#" data-cid="project">公积金贷款计算器</a></li>
            <li><a href="#" data-cid="submit">攒钱贷款计算器</a></li>
            <li><a href="#" data-cid="money">税费计算器</a></li>
            <li><a href="#" data-cid="fish">装修贷款计算器</a></li>
            <li><a href="#" data-cid="buy">购房能力评估计算器</a></li>
        </ul>
        <div id="content">
            <div id="contact">
                <form id="myform" action="#" style="display: block">
                    <div id="contact_left">
                        <div id="dklx">
                            <h5>请您填写1:</h5>
                            贷款类别:
                            <label><input type="radio" name="dktype" checked value="0"/>商业贷款</label>
                            <label><input type="radio" name="dktype" value="1"/>公积金贷款</label>
                            <label><input type="radio" name="dktype" value="2"/>组合型贷款</label>
                        </div>
                        <div id="jsfs">
                            <h6>计算方式:</h6>
                            <dl id="way">
                                <dt><label class="count"><input type="radio" name="jsfs" value="0"
                                                                checked/>根据面积、单价计算</label></dt>
                                <dd style="display: block">
                                    <label>单价:</label><input type="text" name="price">元/平米<br>
                                    <label>面积:</label><input type="text" name="area">平方米<br>
                                    <label>按揭成数</label>
                                    <select class="form-control" name="ajcs">
                                        <option value="70" selected>7成</option>
                                        <option value="80">8成</option>
                                        <option value="90">9成</option>
                                    </select>
                                </dd>
                                <dt><label><input type="radio" value="1" name="jsfs"/>根据贷款总额计算</label></dt>
                                <dd>
                                    <label>贷款总额：<input type="text" name="dkze">元</label>
                                </dd>
                            </dl>
                            <label>按揭年数</label>
                            <select class="form-control" name="ajns">
                                <option value="120" selected>10年（120期）</option>
                                <option value="240">20年（240期）</option>
                                <option value="360">30年（360期）</option>
                            </select><br>
                        </div>
                        <div id="dkll">
                            <label>贷款利率</label>
                            <select name="dkll">
                                <option value="0">12年6月8日基准利率</option>
                                <option value="1">12年7月6日基准利率</option>
                                <option value="2">14年11月22日基准利率</option>
                                <option value="3" selected>15年03月01日基准利率</option>
                            </select><br>
                            <input class="percent" name="dkll" type="text" value="6.80"/>%
                        </div>
                        <div id="method">
                            还款方式:
                            <label><input type="radio" name="bb" checked/>等额本息</label>
                            <label><input type="radio" name="bb"/>等额本金<br></label>
                        </div>
                        <input type="button" name="startCalc" class="start" value="开始计算"/>
                        <input type="reset" class="again" value="重新填写"/>
                    </div>
                    <div id="contact_right">
                        <h5>查看结果:</h5>
                        <label>房款总额:</label><input type="text" name="fousex" readonly/>元<br>
                        <label>贷款总额:</label><input type="text" name="loan" readonly/>元<br>
                        <label>还款总额:</label><input type="text" name="refund" readonly/>元<br>
                        <label>支付利息款:</label><input type="text" name="pay" readonly/>元<br>
                        <label>首期付款:</label><input type="text" name="first" readonly/>元<br>
                        <label>贷款月数:</label><input type="text" name="month" readonly/><br>
                        <label>月均还款:</label><input type="text" name="average" readonly/>元<br>
                        <p>*以上结果仅供参考</p>
                        <img src="images/pic_03.jpg">
                    </div>
                </form>
            </div>
            <div class="box">公积金贷款></div>
            <div class="box">提前还贷</div>
            <div class="box">税费></div>
            <div class="box">装修贷款</div>
            <div class="box">购房能力评估</div>
        </div>
    </div>
</div>
<div id="list">
    <h2>贷款利率表</h2>
    <table>
        <thead>
        <tr>
            <th colspan="3">房贷利率</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th colspan="3">公积金利率（单位%）</th>
        </tr>
        <tr>
            <td>年限</td>
            <td>1-5年</td>
            <td>5-30年</td>
        </tr>
        <tr>
            <td>12年6月8日</td>
            <td>4.20</td>
            <td>4.70</td>
        </tr>
        <tr>
            <td>12年7月6日</td>
            <td>4.00</td>
            <td>4.50</td>
        </tr>
        <tr>
            <td>14年11月22日</td>
            <td>3.75</td>
            <td>4.25</td>
        </tr>
        <tr>
            <td>15年3月1日</td>
            <td>3.50</td>
            <td>4.00</td>
        </tr>
        <tr>
            <td>15年5月11日</td>
            <td>3.25</td>
            <td>3.75</td>
        </tr>
        <tr>
            <th colspan="3">商业贷款利率（单位%）</th>
        </tr>
        <tr>
            <td>年限</td>
            <td>3-5年</td>
            <td>5-30年</td>
        </tr>
        <tr>
            <td>12年6月8日</td>
            <td>6.65</td>
            <td>6.80</td>
        </tr>
        <tr>
            <td>12年7月6日</td>
            <td>6.40</td>
            <td>6.55</td>
        </tr>
        <tr>
            <td>14年11月22日</td>
            <td>6.00</td>
            <td>6.15</td>
        </tr>
        <tr>
            <td>15年3月1日</td>
            <td>5.75</td>
            <td>5.90</td>
        </tr>
        </tbody>
    </table>
</div>

*{
    margin: 0;
    padding: 0;
}
ul{
    list-style: none;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #bbccaa;
    font-size: 13px;
}
select{
    color:#f00;
}

#box {
    width: 750px;
    margin-left: 100px;
}
#box h1{
    float: left;
    position: absolute;
    top: 200px;
    left: 200px;
    line-height: 55px;
}
#box h2 {
    width: 50%;
    line-height:50px;
    font-size: 26px;
    color: #679a3f;
    text-align: center;
    border: 4px solid #679a3f;
    border-radius: 10px;
    margin-left: 25%;
    margin-bottom: 20px;
    margin-top: 50px;
}
.title {
    height: 30px;
}
.title li {
    float: left;
    border: #7b8560 solid 1px;
    border-bottom:none;
    border-radius: 4px 4px 0 0;
    margin-right:3px;
    box-shadow: 0px 0px 5px #ccc;
}
.title li a {
    display: block;
    padding: 0 12px;
    line-height: 30px;
    border-bottom: none;
    background-color: #679a3f;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-radius: 4px 4px 0 0;
}
#content{
    width: 743px;
    height:500px;
    border:1px solid #7b8560;
    border-top: none;
    float: left;
    background-color: #fff;
}
.title li .current {
    background-color: white;
    color: #000;
}
#content > div {
    display: none;
}
#content #contact {
    display: block;
}
#contact_left{
    float: left;
    margin-left: 40px;
    border-right: 1px solid #679a3f;
    padding-right: 25px;
}
#contact h5{
    line-height: 60px;
    padding-top: 2px;
    color: red;
    font-size: 14px;
}
#dklx input{
    margin-right: 10px;
    margin-bottom: 25px;
}
.percent{
    color: red;
}
#way{
    padding-left: 30px;
}
#way dd{
    padding-left: 20px;
    display: none;
}
#way dd input{
    width: 100px;
    margin:0 5px;
}
#way label{
    line-height:25px;
}
#dkll .percent{
    margin: 0 5px 0 46px;
    width: 50px;
    padding: 0 5px;
}
#dkll{
    margin-top: 25px;
    line-height: 30px;
}
#method{
    line-height: 35px;
}
.start{
    width: 75px;
    line-height: 26px;
    background-color: #dc9c30;
    border-radius: 5px;
    margin-left: 50px;
    margin-top: 15px;
    color: #fff;
}
.again{
    width: 75px;
    line-height: 26px;
    background-color: #dc9c30;
    border-radius: 5px;
    margin-left: 18px;
    margin-top: 15px;
    color: #fff;
}
#contact_right{
    float: right;
    margin-right:60px;
}
#contact_right p{
    line-height: 35px;
}
#contact_right input{
    margin-bottom: 10px;
}
/*表格。。。。。。。。。。。。。。。。。。。*/
#list{
    width: 360px;
    line-height:30px;
    float: right;
    position: absolute;
    top: 50px;
    left: 900px;
}
#list h2{
    width: 50%;
    line-height:50px;
    font-size: 26px;
    color: #679a3f;
    text-align: center;
    border: 4px solid #679a3f;
    border-radius: 10px;
    margin-left: 25%;
    margin-bottom: 20px;
}
#list table{
    width: 100%;
    border-collapse: collapse;
}
#list table td{
    border:1px solid #000;
    padding: 0 10px;
}
#list tbody th{
    text-align: center;
    padding:0 10px ;
}
#list thead{
    font-weight: bold;
    width: 100%;
    border-bottom: 1px solid #000;
    text-align: left;
    font-size: 18px;
    line-height: 50px;
}