按揭贷款计算器

javascript

"use strict"
function calculate() {
    var years = document.getElementById("years"); //贷款年限
    var amount = document.getElementById("amount");//贷款金额
    var apr = document.getElementById("apr");// 贷款年利率
    //假设所有输入合法，从input中获取输入数据
    //百分比转换为小数格式，从年利率转换为月利率
    //将年度赔付转化为月度赔付
    if (years.value != "" && amount.value != "" && apr.value != "") {
        var payments = parseFloat(years.value) * 12; //贷款月数
        console.log(years.value);
        var principal = parseFloat(amount.value); //贷款金额
        console.log(amount.value);
        var interest = parseFloat(apr.value) / 100 / 12; //月利率
        console.log(apr.value);
        
        // 计算月度赔付的数据，月还款
        var x = Math.pow(1 + interest, payments);
        var monthly = (principal * interest * x) / (x - 1);
        //输入合法
        if (isFinite(monthly) && monthly > 0) {
            // 文本框输出
            // 将数据填充至字段位置，四舍五入至小数点后两位
            document.getElementById("payment").value = monthly.toFixed(2); //月均还款
            document.getElementById("total").value = (payments * monthly).toFixed(2); //还款总额
            document.getElementById("totalInterest").value = (monthly * payments - principal).toFixed(2); //支付利息
            //保存用户输入数据
            save(amount.value, apr.value, years.value);
            chart(payments, principal, interest, monthly); //贷款月数，本金，月利率，月还款
            // try {
            //     getLenders(amount.value, apr.value, years.value);
            // } catch (e) {}
            //输出数据
        } else {
            alert("输入不合法");
            reset();
        }
    }
}

function chart(payments, principal, interest, monthly) {
    //贷款月数，本金，月利率，月还款
    var tableNode = document.createElement("table"); //获取table对象
    tableNode.setAttribute("id", "tables"); //设置属性
    // 获取行和列
    var row = payments,
        cols = 5;
    // 表头
    // 数组存放表头信息
    var data = ['期次', '偿还利息', '偿还本金', '当期月供', '剩余本金']
    var time = 1,
        interests = 0,
        backRoot = 0,
        monthly = monthly.toFixed(2),
        surplus = principal;
    var trNode = tableNode.insertRow();
    for (var i = 0; i < cols; i++) {
        var tdNode = trNode.insertCell();
        tdNode.innerHTML = data[i];
    }
    while (row) { //循环创建tr
        var trNode = tableNode.insertRow();
        var tdNode = trNode.insertCell();
        tdNode.innerHTML = time; //期次
        var tdNode = trNode.insertCell();
        interests = (surplus * interest).toFixed(2);
        tdNode.innerHTML = interests; //偿还利息

        var tdNode = trNode.insertCell();
        backRoot = (monthly - interests).toFixed(2);
        tdNode.innerHTML = backRoot; //偿还本金    

        var tdNode = trNode.insertCell();
        tdNode.innerHTML = monthly; //当期月供

        var tdNode = trNode.insertCell();
        surplus = (surplus - backRoot).toFixed(2);
        tdNode.innerHTML = surplus; //剩余本金

        time++;
        row--;
    }
    document.getElementById("add").appendChild(tableNode);
}

function reset() {
    document.getElementById("years").value = ""; //贷款年限
    document.getElementById("amount").value = "";//贷款金额
    document.getElementById("apr").value = "";
    document.getElementById("payment").value = "";
    document.getElementById("totalInterest").value = "";
    document.getElementById("total").value = "";//删除表格
    var thisNode = document.getElementById("tables");// thisNode.parentNode.removeChild(thisNode);
    thisNode.remove(thisNode);
}

function save(amount, apr, years) {
    if (window.localStorage) {
        localStorage.loan_amount = amount;
        localStorage.loan_apr = apr;
        localStorage.loan_years = years;
    }
}

// 在文档首次加载时会尝试还原输入字段
window.onload = function() {
    if (window.localStorage && localStorage.loan_amount) {
        document.getElementById("amount").value = localStorage.loan_amount;
        document.getElementById("apr").value = localStorage.loan_apr;
        document.getElementById("years").value = localStorage.loan_years;
    }
};

css

* {
    margin: 0;
    padding: 0;
}

.out {
    font-weight: bold;
}

.forms {
    position: relative;
    width: 400px;
    margin: 30px auto;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid black;
}

.font {
    font-size: 14px;
}

th,
td {
    padding: 5px 5px;
}

th {
    text-align: left;
}

select {
    margin: 0 4px;
}

input {
    margin: 0 8px;
    padding: 1px 8px;
    /* font-size: 12px; */
    outline: none;
    text-align: right;
}

button {
    padding: 2px 5px;
    margin-right: 10px;
}

.hr {
    margin: 10px 0;
}

.clear-data table {
    margin: 0 auto;
    border-collapse: collapse;
    border: none;
    transform: none;
    /* transition: all 5s ease 1s; */
}

.clear-data td {
    padding: 3px 10px;
    border: 1.6px solid grey;
    text-align: center;
}

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="calculate.js"></script>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <section class="forms font">
        <table>
            <th>贷款按揭计算器v1.0</th>
            <tr>
                <td>贷款方式
                    <select name="" id="">
                                <option value="" select="selected">等额本息</option>
                            </select>
                </td>
            </tr>
            <tr>
                <td>贷款年限<input type="number" value="" id="years" onchange="calculate();" placeholder="0">年</td>
            </tr>
            <tr>
                <td>贷款金额<input type="number" value="" id="amount" onchange="calculate();" placeholder="0">元</td>
            </tr>
            <tr>
                <td>贷款年利率<input type="number" value="" id="apr" onchange="calculate();" placeholder="0">%</td>
            </tr>
            <tr>
                <td><button class="cal" onclick="calculate();">计算</button>
                    <button onclick="reset();">重置</button></td>
            </tr>
        </table>
        <hr class="hr" />
        <table>
            <tr>
                <td>月均还款<input type="text" id="payment" class="out" placeholder="0" readonly="true">元</td>
                <!-- οnfοcus="this.blur()" -->
                <!-- disabled="true" -->
                <!-- readonly="true"  -->
            </tr>
            <tr>
                <td>支付利息<input type="text" id="totalInterest" class="out" placeholder="0" readonly="true">元</td>
            </tr>
            <tr>
                <td>还款总额<input type="text" id="total" class="out" placeholder="0" readonly="true">元</td>
            </tr>
        </table>
        <hr class="hr" />
        <section id="add" class="clear-data fonts"></section>

    </section>

</body>

</html>