jQueryEasyUI实现房贷计算器详细教程2--jQuery
2017-06-24 本文已影响0人
老皮丘
1.从载入JavaScript开始
jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。这一部分介绍下载和载入jQuery。
源代码：
<script src="jquery-3.2.1.js"></script>
<script src="fd_jquery.js"></script>
</body>
先修知识：
-
<script>标签用于在HTML中载入JavaScript，src属性表示载入的JavaScript代码的位置。参考链接：<script>。推荐将<script>标签放在</body>标签之前。将下载好的jQuery库源码，和我们将要编写的JavaScript文件，放在上一节HTML文件的相同目录下即可。 - 只需要对JavaScript有一个简略了解即可，包括什么是JavaScript，如何打开、编辑、新建一个JavaScript文件，后续教程中会对用到的JavaScript知识给出明确说明。参考链接：关于JavaScript。
- 只需要对jQuery有一个简略了解即可，包括什么是jQuery，如何下载最新的jQuery库，后续教程中会对用到的jQuery知识给出明确说明。参考链接：jQuery 简介，jQuery 下载。
2. 在文档在加载之后运行 jQuery 代码
我们希望所有的jQuery代码都在文档加载完成之后执行，在fd_jquery.js中编写如下代码，并将后续所有jQuery代码都放在这个方法中即可。
源代码：
$(document).ready(function(){
});
先修知识：
1.以上代码还有一个更加简便的等价写法（参考链接：ready() 方法）：
$(function(){
});
2.$是jQuery的简写形式，参考链接：jQuery 语法。
3. 选择贷款类别
功能：
当用户点击贷款类别的单选按钮时，下方贷款利率文本框会显示对应贷款类别的年利率。根据教程编写时的贷款利率，大于五年的商业贷款年利率是4.90%，大于五年的公积金贷款年利率是3.25%，参考链接：2017年房贷利率，因为房贷利率会不断调整，最终的计算结果仅供参考。
效果截图：
源代码：
$(":radio[name=dai_kuan_lei_bie]").change(function () {
if ( $(":radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
{
$("#id_dai_kuan_li_lv").val("4.90");
} else
{
$("#id_dai_kuan_li_lv").val("3.25");
}
});
先修知识：
1.代码$("input:radio[name=dai_kuan_lei_bie]").change(function () {});完整展现了在HTML标签上发生一个事件时，包含的三部分jQuery代码：选择器、事件和当事件发生时执行的函数。
2.只要对jQuery选择器有一个简要了解即可，教材中只用到了两类选择器，一类是用来选择一个单选按钮的，另一类是用id属性选择标签，会在代码第一次出现的时候进行说明，参考链接：jQuery 选择器。
3.教程中所有选择单选按钮的选择器都采用了如下形式：:radio[name=dai_kuan_lei_bie]。选择器:radio[name=dai_kuan_lei_bie]表示选择一个类型为radio 的 <input> 元素，并且它的name属性值为dai_kuan_lei_bie;选择器:radio[name=dai_kuan_lei_bie]:checked表示选择被选中的name为dai_kuan_lei_bie的radio。参考链接：radio 选择器,[attribute=value] 选择器,:checked 选择器。
4.读者需要对jQuery 事件方法有简要的了解，只需要知道事件方法指的是，当选择器选中的标签发生某一个事件时（例如点击这个标签，便会触发点击事件），这个方法便会执行即可，参考链接：jQuery 事件。
5.change事件是指当元素的值发生改变时会触发的事件，在上述代码中当用户选择贷款类别时，贷款类别单选按钮的值会发生改变，便会触发这个change事件。
6.当change事件触发时，跟在change后面( )中的函数function(){}中的代码会被执行，也就是一条if else语句，参考链接：JavaScript If...Else 语句。
7.代码中用if else语句实现的功能是，当贷款类别是商业贷款时，将贷款利率文本框的值设置为'4.90'，当贷款类别是公积金贷款时，将贷款利率的值设置为3.25。取出和设置一个元素的值，需要用到jQuery的文档操作val(),$(":radio[name=dai_kuan_lei_bie]:checked").val()表示取出取出被选中的贷款类别单选按钮的值，$("#id_dai_kuan_li_lv").val("4.90");表示将贷款利率文本框的值设置为4.90，参考链接：jQuery 文档操作，jQuery val() 方法。
8.选择器#id_dai_kuan_li_lv是教程中用到的第二类选择器，这段代码表示选择一个id属性为id_dai_kuan_li_lv 的元素，参考链接：jQuery # 选择器。
这段代码虽然只有几行，但是已经基本囊括了教程中所需了解的绝大部分JavaScript和jQuery知识，包括教程中用到的两类选择器，jQuery事件，元素的取值与设值和JavaScript的if else语句，读者掌握了这段代码之后，阅读教程后续的jQuery代码的障碍就会小很多。
4. 选择计算方式
功能：用户选择期望的计算方式，当用户选择根据单价面积计算时，将输入贷款总额的文本框隐藏起来；当用户选择根据贷款总额计算时，将输入单价面积的文本框和选择首付比例的选择列表隐藏起来。
效果截图：
源代码：
$("#id_div_gen_ju_zong_e").hide();
$("input:radio[name=ji_suan_fang_shi]").change(function () {
if ( $("input:radio[name=ji_suan_fang_shi]:checked").val() == "gen_ju_mian_ji")
{
$("#id_div_gen_ju_mian_ji").show();
$("#id_div_gen_ju_zong_e").hide();
} else
{
$("#id_div_gen_ju_zong_e").show();
$("#id_div_gen_ju_mian_ji").hide();
}
});
先修知识：
1.hide()与show()是jQuery的效果函数，分表表示隐藏与显示元素，参考链接：jQuery 效果，jQuery 效果 - hide() 方法，jQuery 效果 - show() 方法。
5. 选择还款方式
功能：用户选择期望的还款方式，当用户选择等额本息时，将显示每月还款清单的文本域隐藏起来；当用户选择等额本金时，将显示每月还款额的文本框隐藏起来。
效果截图：
源代码：
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
$("input:radio[name=huan_kuan_fang_shi]").change(function () {
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi")
{
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
} else
{
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan").hide();
}
});
6. 计算贷款详情
当用户点击计算按钮时，程序会根据用户选择的贷款类别、贷款总额、贷款年数和还款方式等信息计算贷款详情，并将计算结果显示在结果文本框中。
房贷利息的计算公式：
等额本息： 每月还款金额 = 〔贷款本金×月利率×（1＋月利率）＾还款月数〕÷〔（1＋月利率）＾还款月数－1〕
等额本金： 每月还款金额 = （贷款本金 / 还款月数）+（本金 — 已归还本金累计额）×每月利率
参考链接：房贷利息计算公式。
程序结构：
当用户直接输入贷款总额时，房贷公式公式中的贷款本金就有了具体的数值；当用户选择输入单价面积时，我们可以根据贷款本金=单价*面积*（1-首付比例）来计算。所以程序应该根据用户选择的计算方式和还款方式，分成四种情况分别计算。
情况1： 计算方式--根据贷款总额；还款方式--等额本息
我们从这个最简单的情况开始，编写代码，并测试结果是否符合预期。读者可以对照网上的任意一款房贷计算器的计算结果，来测试程序的结果是否正确。
效果截图：
源代码：
$("#ji_suan").click(function(){
if ($("input:radio[name=ji_suan_fang_shi]:checked").val() == "gen_ju_mian_ji")
{
//根据单价面积计算的代码
}else
{
if ( $("#id_dai_kuan_zong_e").val() == 0)
{
alert("请填写贷款总额");
}
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
var zong_e = $("#id_dai_kuan_zong_e").val();
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
$("#id_jie_guo_fang_kuan_zong_e").val( "略" );
$("#id_jie_guo_shou_fu_shu_e").val( "略" );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( (mei_yue_huan_kuan * yue_shu).toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan").val( mei_yue_huan_kuan.toFixed(2) );
}else
{
//计算方式--根据贷款总额；还款方式--等额本金的代码
}
}
});
先修知识：
-
click()是jQuery中的点击事件方法，参考链接：jQuery 事件 - click() 方法。 -
alert是JavaScript中弹出警告框的函数，参考链接：JavaScript 消息框。 -
Math对象是JavaScript中用于执行数学任务的对象，pow()方法是Math对象的用来计算 x 的 y 次幂的方法，参考链接：JavaScript Math 对象，JavaScript pow() 方法。 -
toFixed()方法的功能是四舍五入，参考链接：JavaScript toFixed() 方法。
首先我们在计算按钮上添加一个click事件，代码采用嵌套的if else语句，将计算结果的实现分为了四部分，我们将依次把各部分的代码添加进去。首先判断贷款总额文本框中是否有值，如果没有值会向用户弹出一个提示窗口。然后依次取出贷款总额的值，取出年利率的值并转换为月利率，取出贷款月数的值。最后填写计算结果的每一个文本框，因为这种计算方式没有收集到房款总额和首付信息，所以这两栏填“略”。
情况2： 计算方式--根据贷款总额；还款方式--等额本金
等额本息的每月还款额是相同的，等额本金的每月还款额会越来越少。我们只需要关注情况2与情况1的不同之处即可，在情况2中，我们需要一个循环语句计算每个月的还款金额，并更新已还金额、每月还款清单和还款总额的值。我们可以将情况1的代码拷贝到情况2处，并根据房贷利息计算公式来将代码做出相应的修改。
效果截图：
源代码：
var zong_e = $("#id_dai_kuan_zong_e").val();
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
for (var i = 1; i <= yue_shu; i++)
{
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
$("#id_jie_guo_fang_kuan_zong_e").val( "略" );
$("#id_jie_guo_shou_fu_shu_e").val( "略" );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").val( mei_yue_huan_kuan_qing_dan );
先修知识：
1.读者需要了解如何用JavaScript编写for循环，参考链接：JavaScript For 循环。
2.读者需要了解了解JavaScript的字符串对象如何使用，教程中只用到了使用+在字符串末尾添加新值的功能，参考链接：JavaScript 字符串(String)对象。
情况 3、4： 计算方式--根据单价面积；还款方式--等额本息、等额本金
情况1、2的代码写好之后，编写情况3、4的代码就简单多了。我们只需要情况1、2的代码复制到情况3、4的位置;弹出对应的提示框；根据单价面积和首付比例，算出贷款总额；并把房款总额和首付数额填写到结果文本框中即可。
效果截图：
源代码：
if ( $("#id_dan_jia").val() == 0)
{
alert("请填写单价");
}
if ( $("#id_mian_ji").val() == 0)
{
alert("请填写面积");
}
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
var fang_kuan_zong_e = $("#id_dan_jia").val() * $("#id_mian_ji").val();
var sou_fu_bi_li = $("#id_shou_fu_bi_li").val();
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
$("#id_jie_guo_fang_kuan_zong_e").val( fang_kuan_zong_e );
$("#id_jie_guo_shou_fu_shu_e").val( fang_kuan_zong_e * sou_fu_bi_li );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( (mei_yue_huan_kuan * yue_shu).toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan").val( mei_yue_huan_kuan.toFixed(2) );
}else
{
var fang_kuan_zong_e = $("#id_dan_jia").val() * $("#id_mian_ji").val();
var sou_fu_bi_li = $("#id_shou_fu_bi_li").val();
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
for (var i = 1; i <= yue_shu; i++)
{
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
$("#id_jie_guo_fang_kuan_zong_e").val( fang_kuan_zong_e );
$("#id_jie_guo_shou_fu_shu_e").val( fang_kuan_zong_e * sou_fu_bi_li );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").val( mei_yue_huan_kuan_qing_dan );
}
至此，jQuery教程中的贷款计算功能就完成了。
7. 重置
当用户点击重置按钮时，将所有元素的值设置成初始值。
源代码：
$("#chong_zhi").click(function(){
$(":radio[name=dai_kuan_lei_bie][value=gong_ji_jin_dai_kuan]").prop("checked",true);
$("#id_dai_kuan_li_lv").val("3.25");
$(":radio[name=ji_suan_fang_shi][value=gen_ju_mian_ji]").prop("checked",true);
$("#id_div_gen_ju_mian_ji").show();
$("#id_div_gen_ju_zong_e").hide();
$("#id_dan_jia").val("");
$("#id_mian_ji").val("");
$("#id_shou_fu_bi_li").val("0.3");
$("#id_dai_kuan_zong_e").val("");
$("#id_dai_kuan_nian_shu").val("360");
$(":radio[name=huan_kuan_fang_shi][value=deng_e_ben_xi]").prop("checked",true);
$("#id_jie_guo_fang_kuan_zong_e").val("");
$("#id_jie_guo_shou_fu_shu_e").val("");
$("#id_jie_guo_dai_kuan_zong_e").val("");
$("#id_jie_guo_huan_kuan_zong_e").val("");
$("#id_jie_guo_li_xi_zong_e").val("");
$("#id_jie_guo_dai_kuan_yue_shu").val("");
$("#id_jie_guo_mei_yue_huan_kuan").val("");
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").val("");
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
});
先修知识：
1.除了radio单选按钮，其余的元素用val()方法设置新值即可。radio单选按钮比较特殊，需要用到prop() 方法，将想要选中的单选按钮的checked属性的值设置为true,参考链接：jQuery prop() 方法，演示。
8.房贷计算器jQuery部分的源代码
$(document).ready(function(){
/*当贷款类别单选按钮的值改变时执行 */
$(":radio[name=dai_kuan_lei_bie]").change(function () {
/* 当贷款类别单选按钮的值为商业贷款时，将贷款利率文本框的值设置为4.90 ；
当贷款类别单选按钮的值为公积金贷款时，将贷款利率文本框的值设置为3.25
*/
if ( $(":radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
{
$("#id_dai_kuan_li_lv").val("4.90");
} else
{
$("#id_dai_kuan_li_lv").val("3.25");
}
});
/* 隐藏根据总额计算方式的分块*/
$("#id_div_gen_ju_zong_e").hide();
/* 当计算方式单选按钮的值改变时执行*/
$("input:radio[name=ji_suan_fang_shi]").change(function () {
/* 当计算方式单选按钮的值为根据面积时，显示根据面积分块，隐藏根据总额分块；
当计算方式单选按钮的值为根据总额时，显示根据总额分块，隐藏根据面积分块
*/
if ( $("input:radio[name=ji_suan_fang_shi]:checked").val() == "gen_ju_mian_ji")
{
$("#id_div_gen_ju_mian_ji").show();
$("#id_div_gen_ju_zong_e").hide();
} else
{
$("#id_div_gen_ju_zong_e").show();
$("#id_div_gen_ju_mian_ji").hide();
}
});
/* 隐藏根结果中的每月还款清单分块*/
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
/* 当还款方式单选按钮的值改变时执行*/
$("input:radio[name=huan_kuan_fang_shi]").change(function () {
/* 当还款方式单选按钮的值为等额本息时，显示每月还款分块，隐藏每月还款额分块；
当还款方式单选按钮的值为等额本金时，显示每月还款额分块，隐藏每月还款分块
*/
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi")
{
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
} else
{
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan").hide();
}
});
/* 当计算按钮点击时执行*/
$("#ji_suan").click(function(){
/* 当计算方式为根据面积时 */
if ($("input:radio[name=ji_suan_fang_shi]:checked").val() == "gen_ju_mian_ji")
{
/* 当单价文本框为空时弹出提示框 */
if ( $("#id_dan_jia").val() == 0)
{
alert("请填写单价");
}
/* 当面积文本框为空时弹出提示框*/
if ( $("#id_mian_ji").val() == 0)
{
alert("请填写面积");
}
/* 当还款方式为等额本息时*/
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
/*依次计算：房款总额、首付比例、贷款总额、月利率、贷款月数、每月还款额
*/
var fang_kuan_zong_e = $("#id_dan_jia").val() * $("#id_mian_ji").val();
var sou_fu_bi_li = $("#id_shou_fu_bi_li").val();
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
/*依次设置一下文本框的值：结果房款总额、结果首付比例、结果贷款总额、结果还款总额、结果利息总额、结果贷款月数、结果每月还款
*/
$("#id_jie_guo_fang_kuan_zong_e").val( fang_kuan_zong_e );
$("#id_jie_guo_shou_fu_shu_e").val( fang_kuan_zong_e * sou_fu_bi_li );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( (mei_yue_huan_kuan * yue_shu).toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan").val( mei_yue_huan_kuan.toFixed(2) );
}else/* 当还款方式为等额本金时*/
{
/*依次计算：房款总额、首付比例、贷款总额、月利率、贷款月数
*/
var fang_kuan_zong_e = $("#id_dan_jia").val() * $("#id_mian_ji").val();
var sou_fu_bi_li = $("#id_shou_fu_bi_li").val();
var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
/*依次初始化以下变量：已还金额、每月还款清单、还款总额
*/
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
/* 循环计算每月还款情况*/
for (var i = 1; i <= yue_shu; i++)
{
/*依次初始化以下变量：当月还款额、每月还款清单、已还金额、还款总额
*/
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
/*依次设置一下文本框的值：结果房款总额、结果首付比例、结果贷款总额、结果还款总额、结果利息总额、结果贷款月数、结果每月还款清单
*/
$("#id_jie_guo_fang_kuan_zong_e").val( fang_kuan_zong_e );
$("#id_jie_guo_shou_fu_shu_e").val( fang_kuan_zong_e * sou_fu_bi_li );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").val( mei_yue_huan_kuan_qing_dan );
}
}else/* 当计算方式为根据总额时 */
{
/* 当贷款总额文本框为空时弹出提示框 */
if ( $("#id_dai_kuan_zong_e").val() == 0)
{
alert("请填写贷款总额");
}
/* 当还款方式为等额本息时*/
if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
{
/*依次计算：贷款总额、月利率、贷款月数、每月还款额
*/
var zong_e = $("#id_dai_kuan_zong_e").val();
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / ( Math.pow( (li_lv+1), yue_shu ) - 1 );
/*依次设置一下文本框的值：结果房款总额、结果首付比例、结果贷款总额、结果还款总额、结果利息总额、结果贷款月数、结果每月还款
*/
$("#id_jie_guo_fang_kuan_zong_e").val( "略" );
$("#id_jie_guo_shou_fu_shu_e").val( "略" );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( (mei_yue_huan_kuan * yue_shu).toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu);
$("#id_jie_guo_mei_yue_huan_kuan").val( mei_yue_huan_kuan.toFixed(2) );
}else/* 当还款方式为等额本金时*/
{
/*依次计算：贷款总额、月利率、贷款月数、每月还款额
*/
var zong_e = $("#id_dai_kuan_zong_e").val();
var li_lv = ( $("#id_dai_kuan_li_lv").val() / 100.0) / 12.0;
var yue_shu = $("#id_dai_kuan_nian_shu").val();
/*依次初始化以下变量：已还金额、每月还款清单、还款总额
*/
var yi_huan_jin_e = 0;
var mei_yue_huan_kuan_qing_dan ="";
var huan_kuan_zong_e = 0;
/* 循环计算每月还款情况*/
for (var i = 1; i <= yue_shu; i++)
{
/*依次初始化以下变量：当月还款额、每月还款清单、已还金额、还款总额
*/
var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
}
/*依次设置一下文本框的值：结果房款总额、结果首付比例、结果贷款总额、结果还款总额、结果利息总额、结果贷款月数、结果每月还款清单
*/
$("#id_jie_guo_fang_kuan_zong_e").val( "略" );
$("#id_jie_guo_shou_fu_shu_e").val( "略" );
$("#id_jie_guo_dai_kuan_zong_e").val( zong_e );
$("#id_jie_guo_huan_kuan_zong_e").val( huan_kuan_zong_e.toFixed(2) );
$("#id_jie_guo_li_xi_zong_e").val( (huan_kuan_zong_e - zong_e).toFixed(2) );
$("#id_jie_guo_dai_kuan_yue_shu").val( yue_shu );
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").val( mei_yue_huan_kuan_qing_dan );
}
}
});
/* 当重置按钮点击时执行*/
$("#chong_zhi").click(function(){
/*依次将一下标签的值设置为初始状态*/
$(":radio[name=dai_kuan_lei_bie][value=gong_ji_jin_dai_kuan]").prop("checked",true);
$("#id_dai_kuan_li_lv").val("3.25");
$(":radio[name=ji_suan_fang_shi][value=gen_ju_mian_ji]").prop("checked",true);
$("#id_div_gen_ju_mian_ji").show();
$("#id_div_gen_ju_zong_e").hide();
$("#id_dan_jia").val("");
$("#id_mian_ji").val("");
$("#id_shou_fu_bi_li").val("0.3");
$("#id_dai_kuan_zong_e").val("");
$("#id_dai_kuan_nian_shu").val("360");
$(":radio[name=huan_kuan_fang_shi][value=deng_e_ben_xi]").prop("checked",true);
$("#id_jie_guo_fang_kuan_zong_e").val("");
$("#id_jie_guo_shou_fu_shu_e").val("");
$("#id_jie_guo_dai_kuan_zong_e").val("");
$("#id_jie_guo_huan_kuan_zong_e").val("");
$("#id_jie_guo_li_xi_zong_e").val("");
$("#id_jie_guo_dai_kuan_yue_shu").val("");
$("#id_jie_guo_mei_yue_huan_kuan").val("");
$("#id_jie_guo_mei_yue_huan_kuan_qing_dan").val("");
$("#id_div_jie_guo_mei_yue_huan_kuan").show();
$("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
});
});
9.jQuery部分的最终效果截图
