<html>
<head>
<title>房贷计算器</title>
<style>
#divTitle
{
margin:20px;
padding:20px 25px 20px 20px;
background-color: #ddd;
border-radius:15px 15px 15px 15px;
box-shadow:12px 12px 15px #111;
}
#divTitle input.text, select
{
border:none;
border-bottom:solid 1px blue;
background-color:#ddd;
}
table.top
{
border-collapse: collapse;
border-spacing: 0;
border: solid 1px black;
margin: 2px;
width: 500px;
}
#divMain
{
margin:40px 20px 20px 20px;
padding:20px 25px 20px 20px;
background-color: #ddd;
border-radius:15px 15px 15px 15px;
box-shadow:12px 12px 15px #111;
}
table.main
{
border-collapse: collapse;
border-spacing: 0;
border: solid 1px black;
margin: 2px;
width: 100%;
}
#divCreater table
{
font-size:14px;
}
</style>
</head>
<body>
<div id="divTitle">
<table border="0" style="width:100%">
<tr>
<td style="width:0px;"></td>
<td style="width:500px;">
<table class="top" align="center">
<tr>
<th></th>
<th>商业部份</th>
<th>公积金部份</th>
</tr>
<tr>
<th>贷款额度:</th>
<td><input type="text" class="text" id="txtMoney1" value="500000" />(元)</td>
<td><input type="text" class="text" id="txtMoney2" value="500000" />(元)</td>
</tr>
<tr>
<th>贷款期限:</th>
<td><input type="text" class="text" id="txtMonth1" value="300" />(月)</td>
<td><input type="text" class="text" id="txtMonth2" value="300" />(月)</td>
</tr>
<tr>
<th>年利率:</th>
<td><input type="text" class="text" id="txtAPR1" value="6.22" />(%)</td>
<td><input type="text" class="text" id="txtAPR2" value="4.5" />(%)</td>
</tr>
</table>
</td>
<td style="width:250px;">
<table>
<tr>
<th>还款方式:</th>
<td>
<select id="txtType1">
<option value="1">等额本息</option>
<option value="2">等额本金</option>
</select>
</td>
<td colspan="3">
<input type="button" id="btnCompute" value="计算" />
</td>
</tr>
</table>
</td>
<td style="float:right;">
<div id="divCreater" style="width:130px;">
<table border="0">
<tr>
<td style="width:45px;">作者：</td><td style="width:70px;">DongJiande</td>
</tr>
<tr>
<td>日期：</td><td>2013-3-15</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
<div id="divMain" style="display:none;"></div>
<script>
function $(id)
{
return document.getElementById(id);
};
function C(tap, parentNode)
{
var obj = document.createElement(tap);
parentNode.appendChild(obj);
return obj;
};
function Compute()
{
var I = this;
I.txtMoney1 = $('txtMoney1');
I.txtMoney2 = $('txtMoney2');
I.txtMonth1 = $('txtMonth1');
I.txtMonth2 = $('txtMonth2');
I.txtAPR1 = $('txtAPR1');
I.txtAPR2 = $('txtAPR2');
I.txtType1 = $('txtType1');
I.btnCompute = $('btnCompute');
I.divMain = $('divMain');
//I.divCreater = $('divCreater');
//I.divCreater.style.position = 'absolute';
//I.divCreater.style.top = 30;
//I.divCreater.style.left = document.body.clientWidth - I.divCreater.offsetWidth - 50;
I.btnCompute.onclick = function()
{
I.Print();
};
};
Compute.prototype.Print = function()
{
var I = this;
I.divMain.style.display = 'block';
I.divMain.innerHTML = '';
I.table = C('table', I.divMain); I.table.setAttribute('border', '1'); I.table.className = 'main';
I.thead = C('thead', I.table);
I.tfoot = C('tfoot', I.table);
var tr = C('tr', I.thead);
var th = C('th', tr); th.innerHTML = '期数'; th.rowSpan = '2';
th = C('th', tr); th.innerHTML = '本期应还总额'; th.colSpan = '3';
th = C('th', tr); th.innerHTML = '本期应还本金'; th.colSpan = '3';
th = C('th', tr); th.innerHTML = '本期应还利息'; th.colSpan = '3';
th = C('th', tr); th.innerHTML = '剩余本金'; th.colSpan = '3';
tr = C('tr', I.thead);
th = C('th', tr); th.innerHTML = '商业';
th = C('th', tr); th.innerHTML = '公积金';
th = C('th', tr); th.innerHTML = '合计';
th = C('th', tr); th.innerHTML = '商业';
th = C('th', tr); th.innerHTML = '公积金';
th = C('th', tr); th.innerHTML = '合计';
th = C('th', tr); th.innerHTML = '商业';
th = C('th', tr); th.innerHTML = '公积金';
th = C('th', tr); th.innerHTML = '合计';
th = C('th', tr); th.innerHTML = '商业';
th = C('th', tr); th.innerHTML = '公积金';
th = C('th', tr); th.innerHTML = '合计';
I.tbody = C('tbody', I.table);
var money1 = parseFloat(I.txtMoney1.value);
var money2 = parseFloat(I.txtMoney2.value);
var month1 = parseInt(I.txtMonth1.value);
var month2 = parseInt(I.txtMonth2.value);
var apr1 = parseFloat(I.txtAPR1.value) / 100;
var apr2 = parseFloat(I.txtAPR2.value) / 100;
if (I.txtType1.value == '1')
{
I.PrintType1(money1, month1, apr1, money2, month2, apr2);
}
else if (I.txtType1.value == '2')
{
I.PrintType2(money1, month1, apr1, money2, month2, apr2);
}
};
Compute.prototype.PrintType1 = function(money1, month1, apr1, money2, month2, apr2)//等额本息
{
var I = this;
var mapr1 = apr1 / 12; //商业月利率
var mapr2 = apr2 / 12; //公积金月利率
/*
//1个月
money * (1 + mapr) - x = 0;
//2个月
(money * (1 + mapr) - x) * (1 + mapr) - x = 0;
//3个月
((money * (1 + mapr) - x) * (1 + mapr) - x)) * (1 + mapr) - x = 0;
//4个月
(((money * (1 + mapr) - x) * (1 + mapr) - x)) * (1 + mapr) - x)) * (1 + mapr) - x = 0;
money * (1 + mapr)^month = x(1 + (1 + mapr) + (1 + mapr)^2 + (1 + mapr)^3 + ... + (1 + mapr)^(month-1))
money * (1 + mapr) ^ month
x = -------------------------------------------------------------------------
1 + (1 + mapr) + (1 + mapr)^2 + ... + (1 + mapr)^(month - 1)
*/
var fm1 = 1;
for (var i = 1; i < month1; i++)
{
fm1 += Math.pow(1 + mapr1, i);
}
var fm2 = 1;
for (var i = 1; i < month2; i++)
{
fm2 += Math.pow(1 + mapr2, i);
}
var perMonth1 = (money1 * Math.pow(1 + mapr1, month1) / fm1).toFixed(2); //商业每月还款额,保留两位小数
var perMonth2 = (money2 * Math.pow(1 + mapr2, month2) / fm2).toFixed(2); //公积金每月还款额,保留两位小数
var tr, td, leftMoney1 = money1, leftMoney2 = money2;
var month = (month1 > month2 ? month1 : month2);
var totalPerMonth1 = 0,totalPerMonth2 = 0,totalPerMonth = 0,totalBJ1 = 0,totalBJ2 = 0, totalBJ=0, totalLX1 = 0, totalLX2 = 0,totalLX = 0;
for (var i = 1; i <= month; i++)
{
var lx1 = (leftMoney1 * mapr1).toFixed(2);
leftMoney1 = (leftMoney1 * (1 + mapr1) - perMonth1).toFixed(2);
var lx2 = (leftMoney2 * mapr2).toFixed(2);
leftMoney2 = (leftMoney2 * (1 + mapr2) - perMonth2).toFixed(2);
tr = C('tr', I.tbody);
td = C('td', tr); td.innerHTML = i; //还款期数
if (i <= month1)
{
td = C('td', tr); td.innerHTML = perMonth1; //商业还款额
totalPerMonth1 += parseFloat(perMonth1);
}
else
{
td = C('td', tr); td.innerHTML = '';
}
if (i <= month2)
{
td = C('td', tr); td.innerHTML = perMonth2; //公积金还款额
totalPerMonth2 += parseFloat(perMonth2);
}
else
{
td = C('td', tr); td.innerHTML = '';
}
if (i <= month1 && i <= month2)
{
td = C('td', tr); td.innerHTML = (parseFloat(perMonth1) + parseFloat(perMonth2)).toFixed(2); //还款额合计
totalPerMonth += parseFloat(perMonth1) +
HTML5+JavaScript房贷计算器
5星 · 超过95%的资源 需积分: 50 165 浏览量
2015-03-11
11:42:21
上传
评论 5
收藏 3KB ZIP 举报 
HTML5+JavaScript房贷计算器.zip （1个子文件） 
HTML5+JavaScript+CSS3 房贷计算器.html 17KB
pf_enjoylife
- 粉丝: 4
- 资源: 4
- 1
- 2
- 3
- 4
前往页