console 命令行工具 X clear

console

/* plem.cn */
var tpl = document.querySelector("#tpl");
var div = document.querySelector("#loan");
var table = document.querySelector("table>tbody");
div.append(document.importNode(tpl.content, true));

document.querySelector("#add").addEventListener("click", function (e) {
    div.append(document.importNode(tpl.content, true));
});

document.querySelector("#repay").addEventListener("click", function (e) {
    var total = document.querySelector("#total").value;
    var type = querySelector("[name='type']");
    var year = querySelector("[name=year]");
    var rate = querySelector("[name=rate]");
    var date = querySelector("[name=date]").map(function (t) {
        return new Date(t.replace(/-/g, "/"));
    });
    table.innerHTML = tbody(total, type, year, rate, date);
});

function querySelector(s) {
    return Array.prototype.slice.call(document.querySelectorAll(s)).map(function (t) {
        return t.value
    });
}

function tbody(total, type, year, rate, date) {
    this._total = 0;
    this._balance = total * 10000;
    var t = _balance;
    var d = new Date(date[0].getTime());
    var m = year[0] * 12;
    var _m = m;
    var items = new Array();
    for (var i = 1; i <= m; i++) {
        var k = 0;
        for (var j = date.length - 1; j > 0; j--) {
            if (date[j].getTime() > d.getTime()) {
                continue;
            } else if (date[j].getTime() == d.getTime()) {
                t = _balance;
                _m = year[j] * 12 - i + 1;
                k = j;
                break;
            } else {
                k = j;
                break;
            }
        }
        m = year[k] * 12;
        var fn = eval("this.bill_b" + type[k]);
        var args = new Array(t, _m, rate[k] / 1200, d, i); 
        var b = fn.apply(this, args);
        items.push(b);
        d.setMonth(d.getMonth() + 1);
        //items.push(bill(t, m, r, i, d));
    }

    return items.map(tr => {
        var td = tr.map(td => `<td>${td}</td>`).join('');
        return `<tr>${td}</tr>`
    }).join('');
}

function bill_bj(t, m, r, d, p) {
    let interest = _balance * r;
    let capital = t / m;
    let payment = capital + interest;
    let balance = _balance - capital;
    _balance = balance;
    this._total += interest;
    return new Array(p, d.toLocaleDateString(), payment.toFixed(2), this._total.toFixed(2), balance.toFixed(2)); //, capital.toFixed(2)

}

function bill_bx(t, m, r, d, p) {
    let interest = _balance * r;
    let payment = t * r * Math.pow(1 + r, m) / (Math.pow(1 + r, m) - 1);
    let capital = payment - interest;
    let balance = _balance - capital;
    _balance = balance;
    this._total += interest;
    return new Array(p, d.toLocaleDateString(), payment.toFixed(2), this._total.toFixed(2), balance.toFixed(2)); //, capital.toFixed(2)
}

<!DOCTYPE html>
<html>

<head lang="en">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width">
	<title>贷款账单</title>
	<style>
	</style>

</head>

<body>
	<template id="tpl">
		<select name="type"><option value="j">本金</option><option value="x">本息</option></select>
        <input name="year" value="30" placeholder="期限，单位年，如30" />
        <input name="rate" value="5.85" placeholder="年化率，如5.85" />
        <input name="date" value="2022/1/1" type="date" placeholder="日期" />
        <br />
    </template>
    <input id="total" value="150" placeholder="总额，单位万，如150 " />
    <button id="add"> + </button>&nbsp;<button id="repay"> 计算 </button><br />

    <div id="loan">

    </div>

    <table>
        <thead>
            <tr>
                <th>期数</th>
                <th>日期</th>
                <th>每月还款额</th>
                <th>累计利息</th>
                <th>剩余贷款额</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <a href="https://beian.miit.gov.cn/" target="_blank" style="position: fixed;bottom: 0;">粤ICP备20012318号 @plem.cn</a>
</body>

</html>

/* plem.cn */

input {
    width: 20%;
}

a {
    position: fixed;
    bottom: 0;
    text-decoration: none;
}

table tbody {
    display: block;
    height: 450px;
    overflow-y: scroll
}

table thead,
tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

table head {
    width: calc( 100% - 1.1em)
}

td,
th {
    text-align: center
}