直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>等额本息的计算器</title>
<style>
body {
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
table {
margin-top: 20px;
border-right: 1px solid #804040;
border-bottom: 1px solid #804040;
border-collapse: collapse;
}
table tr {
height: 30px;
}
table th {
border-left: 1px solid #804040;
border-top: 1px solid #804040;
}
table td {
border-left: 1px solid #804040;
border-top: 1px solid #804040;
text-align: center;
}
input {
height: 30px;
border-color: deepskyblue;
color: deepskyblue;
font-size: 18px;
text-align: center;
}
</style>
</head>
<body id="main_box">
<table id="main_table">
<tr class="fixed-row">
<th>贷款本金</th>
<th><input type="text" name="ben" placeholder="请输入" /></th>
<th>还款期数</th>
<th><input type="text" name="qi" placeholder="请输入" /></th>
<th>月利率‰</th>
<th><input type="text" name="lv" placeholder="请输入" /></th>
</tr>
<tr class="fixed-row">
<th>还款期</th>
<th>还款日期</th>
<th>月还利息</th>
<th>月还本金</th>
<th>月还款额</th>
<th>剩余本金</th>
</tr>
</table>
<br />
<div id="z_xi_box" style="display: none;">
<div>查看结果差异</div>
<div><span style="font-weight: 500;">总利息（利用公式得到的结果）：</span><span id="z_xi_1"></span></div>
<div><span style="font-weight: 500;">总利息（一步一步累加的结果）：</span><span id="z_xi_2"></span></div>
</div>
<br />
<input type="button" value="点击开始计算" class="jisuan" style="width: 280px;height: 50px;color: #333;font-size: 32px;" />
<br />
<br />
<script>
function readElementByClassName (eClassName) {
let elements = document.getElementsByClassName(eClassName);
return (elements.length > 0 ? elements[0] : undefined);
}
function readElementById (eId) {
return document.getElementById(eId);
}
function appendRowToTable (tableElement, ...columnDatas) {
/** 第一种算法: error */
//let rowElement = document.createElement('tr');
//for (let colData of columnDatas) {
// let colElement = document.createElement('td');
// colElement.innerHTML = colData;
// rowElement.appendChild(colElement);
//}
//tableElement.appendChild(rowElement);
/** 第二种算法: ok */
//let tableRowCount = tableElement.getElementsByTagName('tr').length;
let tableRowCount = tableElement.rows.length;
let rowElement = tableElement.insertRow(tableRowCount);
for (let i = 0; i < columnDatas.length; i++) {
let colElement = rowElement.insertCell(i);
colElement.innerHTML = columnDatas[i];
}
}
function removeDynamicRowsFromTable (tableElement) {
/** 第一种算法: error */
//let tableRowList = tableElement.getElementsByTagName('tr');
//console.log('tableRowList.length', tableRowList.length);
//for (let tableRow of tableRowList) {
// if (tableRow.className != 'fixed-row') {
// console.log('removing tableRow');
// tableRow.parentNode.removeChild(tableRow);
// }
//}
/** 第二种算法: ok ( 其中的rowIndexListToBeRemoved是降序排列的 ) */
let tableRowList = tableElement.rows;
let rowIndexListToBeRemoved = [];
let maxRowIndexToBeRemoved = -1;
for (let tableRow of tableRowList) {
if (tableRow.className != 'fixed-row') {
let rowIndex = tableRow.rowIndex;
if (0 == rowIndexListToBeRemoved.length) {
rowIndexListToBeRemoved.push(rowIndex);
continue;
}
let toBeInsertedIndex = undefined;
for (let i = 0; i < rowIndexListToBeRemoved.length; i++) {
if (rowIndex > rowIndexListToBeRemoved[i]) {
toBeInsertedIndex = i;
break;
}
}
if (toBeInsertedIndex != undefined) {
rowIndexListToBeRemoved.splice(toBeInsertedIndex, 0, rowIndex);
} else {
rowIndexListToBeRemoved.push(rowIndex);
}
}
}
console.log('will remove rows', rowIndexListToBeRemoved);
// debugger;
for (let i of rowIndexListToBeRemoved) {
tableElement.deleteRow(i);
}
}
function doCalculate () {
//const bodyBoxElement = readElementById('main_box');
const tableElement = readElementById('main_table');
/** 先移除动态插入的表格行 */
removeDynamicRowsFromTable(tableElement);
/** 条件 */
// var ben = 300000;
// var qi = 24;
// var lv = 0.0075;
var ben, qi, lv;
/** 返回带有指定标签名的对象集合 */
let inputElementList = document.getElementsByTagName('input');
for (let inputElement of inputElementList) {
if ('ben' == inputElement.name) {
ben = parseFloat(inputElement.value);
} else if ('qi' == inputElement.name) {
qi = parseFloat(inputElement.value);
} else if ('lv' == inputElement.name) {
lv = parseFloat(inputElement.value) / 1000.0;
}
}
console.log('condition', ben, qi, lv);
/** 等额本息还款方式的每月还款额 = 总贷款额 x 月利率 x ( 1 + 月利率 ) ^ 还款期数 / ( ( 1 + 月利率 ) ^ 还款期数 - 1 ) */
var moon = (ben * lv * Math.pow((1 + lv), qi)) / (Math.pow((1 + lv), qi) - 1);
/** 总利息 = 还款总额 - 本金 */
var z_xi = (moon * qi) - ben;
/** 已还本金 */
var yi_ben = 0;
var z_xi_2 = 0;
for (var i = 1; i < (qi + 1); i++) {
/** 本月还的利息 */
var moon_xi = (ben - yi_ben) * lv;
z_xi_2 += moon_xi;
/** 本月还的本金 */
var moon_ben = moon - moon_xi;
yi_ben += moon_ben;
var shengyu_ben = ben - yi_ben;
appendRowToTable(tableElement, i, 'NA', ('¥ ' + moon_xi.toFixed(2)),
('¥ ' + moon_ben.toFixed(2)), ('¥ ' + moon.toFixed(2)), ('¥ ' + shengyu_ben.toFixed(2)));
}
let zxElement1 = readElementById('z_xi_1');
zxElement1.innerHTML = z_xi;
let zxElement2 = readElementById('z_xi_2');
zxElement2.innerHTML = z_xi_2;
let zxBoxElement = readElementById('z_xi_box');
zxBoxElement.style.display = 'block';
}
readElementByClassName('jisuan').addEventListener('click', doCalculate);
document.onkeydown = function (e) {
var theEvent = window.event || e;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
// 回车键。
if (13 == code) {
doCalculate();
}
}
</script>
</body>
</html>
参考来源：https://blog.csdn.net/sn_qmzm521/article/details/78995476
网友评论