分享一个之前看到的 房贷按揭贷款计算器,也许某天能 用上!!!
原代码面是从 招商银行 某个网站上 找到的.
源代码:
1 <!DOCTYPE html>
2
3 <html>
4 <head runat="server">
5 <meta name="viewport" content="width=device-width" />
6 <title>计算利息</title>
7 <style type="text/css">
8 .c_table {
9 width:500px;
10 }
11 .c_table .caltitle {
12 text-align: center;
13 background-color: #f0f0f0;
14 font-size: 14px;
15 }
16 </style>
17 <script src="../../Scripts/jquery-3.3.1.min.js"></script>
18 <script>
19
20 function On_CM_CalBtnClick() {
21 var total = $("#cm_benjin").val();//贷款金额
22 var terms = $("#cm_term").val();//贷款期限 月
23 var yearrate = $("#cm_rate").val(); //贷款年利率
24 var payfun = $("#cm_type").val();
25
26 var cal_url = "Result01?total=" + total + "&yearrate=" + yearrate + "&terms=" + terms + "&payfun=" + payfun;
27 // alert(cal_url);
28 window.open(cal_url);
29
30
31 }
32
33 </script>
34 </head>
35 <body>
36 <div>
37 <table class="c_table" cellspacing="1" cellpadding="0" border="0">
38 <tbody>
39 <tr>
40 <td colspan="2" class="caltitle">按揭贷款计算器(等额本息还款/等额本金还款)</td>
41 </tr>
42 <tr>
43 <td width="40%" class="left">贷款金额</td>
44 <td width="60%" class="right">
45 <input type="text" id="cm_benjin" value="100000" class="inputtxt" maxlength="20">元</td>
46 </tr>
47 <tr>
48 <td width="40%" class="left">贷款期限</td>
49 <td width="60%" class="right">
50 <input type="text" id="cm_term" value="24" class="inputtxt" maxlength="3">月（1-360）</td>
51 </tr>
52 <tr>
53 <td width="40%" class="left">贷款年利率</td>
54 <td width="60%" class="right">
55 <input type="text" id="cm_rate" value="10.8" class="inputtxt" maxlength="20">% </td>
56 </tr>
57 <tr>
58 <td width="40%" class="left">还款方式</td>
59 <td width="60%" class="right">
60 <select id="cm_type" class="floatleft">
61 <option value="de">等额本息还款</option>
62 <option value="dj">等额本金还款</option>
63 </select>
64 <input type="button" id="btn_calculate" name="btn_calculate" value="计算" onclick="On_CM_CalBtnClick();" />
65 </td>
66 </tr>
67 <tr>
68 <td colspan="2"> </td>
69 </tr>
70 </tbody>
71 </table>
72 </div>
73 </body>
74 </html>
填贷款金额,贷款期限
1 <!DOCTYPE html>
2
3 <html>
4 <head runat="server">
5 <meta name="viewport" content="width=device-width" />
6 <title>个人贷款计算器计算结果</title>
7
8 <script src="../../Scripts/Calculator.js"></script>
9
10 </head>
11 <body>
12 <table cellpadding="0" cellspacing="0" width="563" border="0" align="center" style="font-size: 12px">
13 <tr>
14 <td>
15 <table style="border-collapse: collapse; border-color: #c6c9ce" align="center" cellpadding="3" cellspacing="0" rules="all" width="546" border="1">
16 <tr>
17 <td width="90" height="24" bgcolor="#dbdbdb" align="center">还款方式</td>
18 <td align="center" id="td_1_type"></td>
19 <td width="80" bgcolor="#dbdbdb" align="center">还款总额</td>
20 <td align="center">
21 <input id="res01_total" readonly="readonly" style="border: none 0 white; width: 80px; font-size: 12px" type="text" /></td>
22 <td width="80" bgcolor="#dbdbdb" align="center">利息总额</td>
23 <td align="center">
24 <input id="res01_ratetotal" readonly="readonly" style="border: none 0 white; width: 80px; font-size: 12px" type="text" /></td>
25 </tr>
26 </table>
27 <div id="calRdiv" style="margin-top: 10px">
28 </div>
29 </td>
30 </tr>
31 </table>
32 </body>
33 <script language="javascript" type="text/javascript">
34 var total = getQuery("total");//总额
35 var yearrate = getQuery("yearrate"); //年利率
36 var terms = getQuery("terms"); //期数
37 var payfun = getQuery("payfun"); // de 等额本息/ dj 等额本金
38
39 if (payfun == "de")
40 document.getElementById("td_1_type").innerHTML = "等额本息还款";
41 else if (payfun == "dj")
42 document.getElementById("td_1_type").innerHTML = "等额本金还款";
43
44 function calRate() {
45 var corpus = parseFloat(total);
46 var rates = (parseFloat(yearrate)) / 100 / 12;
47 var rateMon = parseInt(terms);
48
49 var sbResult = ""
50 if (payfun == "de")
51 sbResult = calculateR(rates, rateMon, corpus);
52 else if (payfun == "dj")
53 sbResult = calculateC(rates, rateMon, corpus);
54
55 document.getElementById("calRdiv").innerHTML = sbResult;
56 }
57
58 //计算等额还款
59 function calculateR(rates, rateMon, corpus)//利率、期限、本金
60 {
61 var limitTime = rateMon;//贷款期限
62 var timeLeft = limitTime;
63
64 var corpusLeft = corpus;//等额还款之本金
65 var corpusLeftMon = corpus;//等额还款之剩余本金
66
67 var capMon, corpusMon, varerestMon;
68 var capTotle = 0, corpusTotle = 0, varerestTotle = 0;
69
70 var sbResultR;
71
72 var rate = rates;
73
74 sbResultR = createTable(sbResultR);
75
76 for (var i = 1; i < limitTime; i++) {
77 var ratePow = Math.pow(rate + 1, timeLeft);//每期贷款利率
78
79 capMon = (corpusLeft * rate * ratePow) / (ratePow - 1);//月供
80 varerestMon = corpusLeftMon * rate;//月供利息
81 corpusMon = capMon - varerestMon;//月供本金
82
83 corpusLeftMon -= corpusMon;//本金余额
84 capTotle += capMon;//还款总额
85 varerestTotle += varerestMon;//利息总额
86 corpusTotle += corpusMon;//本金总额
87
88 sbResultR = output(sbResultR, i, capMon, varerestMon, corpusMon, corpusLeftMon, rate * 12 * 100);
89 }
90
91 ///最后一期
92 varerestMon = corpusLeftMon * rate;//月供利息
93 corpusMon = corpusLeftMon;//月供本金
94
95 capMon = varerestMon + corpusLeftMon;//月供
96 corpusLeftMon -= corpusMon;//本金余额
97 capTotle += capMon;//还款总额
98 varerestTotle += varerestMon;//利息总额
99 corpusTotle += corpusMon;//本金总额
100
101 sbResultR = output(sbResultR, limitTime, capMon, varerestMon, corpusMon, corpusLeftMon, rate * 12 * 100);
102
103 sbResultR = output(sbResultR, 9999, capTotle, varerestTotle, corpusTotle, corpusLeftMon, 0);
104 sbResultR = endTable(sbResultR);
105 document.getElementById("res01_total").value = (Math.round(capTotle * 100)) / 100;//还款总额
106 document.getElementById("res01_ratetotal").value = (Math.round(varerestTotle * 100)) / 100;//利息总额
107 return sbResultR;
108 }
109
110 //计算等额本金
111 function calculateC(rates, rateMon, corpus) {
112 var limitTime = rateMon;
113 var timeLeft = limitTime;
114
115 var corpusLeftMon = corpus;//等额本金之剩余本金
116
117 var capMon, corpusMon, varerestMon;
118 var capTotle = 0, varerestTotle = 0, corpusTotle = 0;
119
120 corpusMon = corpus / limitTime;
121 var rate = rates;
122
123 var sbResultC;
124 sbResultC = createTable(sbResultC);
125
126 for (var i = 1; i <= limitTime; i++) {
127 varerestMon = corpusLeftMon * rate;
128 capMon = corpusMon + varerestMon;
129
130 corpusLeftMon -= corpusMon;
131 capTotle += capMon;
132 varerestTotle += varerestMon;
133 corpusTotle += corpusMon;
134 sbResultC = output(sbResultC, i, capMon, varerestMon, corpusMon, corpusLeftMon, rate * 12 * 100);
135 }
136
137 sbResultC = output(sbResultC, 9999, capTotle, varerestTotle, corpusTotle, 0, 0);
138 sbResultC = endTable(sbResultC);
139 document.getElementById("res01_total").value = (Math.round(capTotle * 100)) / 100;//还款总额
140 document.getElementById("res01_ratetotal").value = (Math.round(varerestTotle * 100)) / 100;//利息总额
141 return sbResultC;
142 }
143
144 function createTable(sbResult) {
145 sbResult = "<table cellpadding=3 style='BORDER-COLLAPSE: collapse;border-color:#c6c9ce; font-size:12px' align=center cellSpacing=0 rules=all width=546 border=1>";
146 sbResult += "<tr height=24><td width=20% bgcolor=#dbdbdb align=center>期数</td><td width=20% bgcolor=#dbdbdb align=center>月供</td><td width=20% bgcolor=#dbdbdb align=center>月供本金</td><td width=20% bgcolor=#dbdbdb align=center>月供利息</td><td width=20% bgcolor=#dbdbdb align=center>本金余额</td></tr>";
147 return sbResult;
148 }
149
150 function endTable(sbResult) {
151 sbResult += "</table>";
152 return sbResult;
153 }
154
155 function formatnumber(num) {
156 var dotIndex = num.indexOf(".");
157 var length = num.length;
158 if (dotIndex == length - 2) { num = num + "0"; }
159 switch (dotIndex) {
160 case -1: num = num + ".00"; break;
161 default: break;
162 }
163
164 return num;
165 }
166
167 function output(sbResult, month, cap, varerest, corpus, corpusLeftMon, rate) {
168 sbResult += "<tr><td align=center>";
169 if (month == 9999)
170 sbResult += "总计";
171 else
172 sbResult += month.toString();
173
174 sbResult += "</td><td align=middle>";
175 cap = (Math.round(cap * 100)) / 100;
176 sbResult += formatnumber(cap.toString());
177
178 sbResult += "</td><td align=middle>";
179 corpus = (Math.ceil(corpus * 100)) / 100;
180 sbResult += formatnumber(corpus.toString());
181
182 sbResult += "</td><td align=middle>";
183 varerest = (Math.round(varerest * 100)) / 100;
184 sbResult += formatnumber(varerest.toString());
185
186 sbResult += "</td><td align=middle>";
187 if (month == 9999) {
188 sbResult += "---";
189 sbResult += "</td>";
190 }
191 else {
192 corpusLeftMon = (Math.round(corpusLeftMon * 100)) / 100;
193 sbResult += formatnumber(corpusLeftMon.toString());
194
195 sbResult += "</td>";
196 }
197
198 sbResult += "</tr>";
199 return sbResult;
200
201 }
202 calRate();
203 </script>
204 </html>
个人贷款计算器计算结果
