<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>房贷计算</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport" /> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no" /> <link href="/js/lpindex/loan/css.css" rel="stylesheet" type="text/css"> <script src="/js/lpindex/loan/jquery.js"></script> <script src="/js/lpindex/loan/jcookie.js" type="text/javascript"></script> <script src="/js/lpindex/loan/calculator.js"></script> <script src="/js/lpindex/loan/common.js"></script> </head> <script> document.title = '房贷计算'; </script> <body class="calculator"> <div id="edit"> <header class="headerBar"> <p class="white bold">房贷计算</p> <a class="back" href="javascript:history.go(-1);"></a> </header> <section class="option"> <span class="on">商业贷款</span> <span class="">公积金贷款</span> <span class="">组合贷款</span> </section> <section class="calcBox"> <p><span>房屋总价</span><span class="sel"><input id="total" type="number" value=""/></span><span class="fr">万元</span></p> <p><span>首付金额</span><span class="sel"><input id="first" type="number" value=""/></span><span class="fr">万元</span></p> <p class="ggj" style="display:none"><span>公积金贷款</span><span class="sel"><input class="loan" id="gjjLoanTotal" type="number" value="0"/></span><span class="fr">万元</span></p> <p class="ggj" style="display:none"> <span>公积金利率</span> <span class="sel drop"> <select class="loan_select" ></select> <em class="select_arrow"></em> </span> <span class="rate fr ratelv" id=""></span> </p> <input type="hidden" id="rate" value="0"> <p class="dk"><span>商贷总额</span><span class="sel"><input class="loan" id="loanTotal" type="number" value="0"/></span><span class="fr">万元</span></p> <p class="dk"> <span>商贷利率</span> <span class="sel drop"> <select class="loan_select" ></select> <em class="select_arrow"></em> </span> <span class="rate fr ratelv" id=""></span> </p> <p> <span>贷款年数</span> <span class="sel drop"> <select id="years" class="year_select"> <option value="1">1年(12期)</option> <option value="2">2年(24期)</option> <option value="3">3年(36期)</option> <option value="4">4年(48期)</option> <option value="5">5年(60期)</option> <option value="6">6年(72期)</option> <option value="7">7年(84期)</option> <option value="8">8年(96期)</option> <option value="9">9年(108期)</option> <option value="10">10年(120期)</option> <option value="11">11年(132期)</option> <option value="12">12年(144期)</option> <option value="13">13年(156期)</option> <option value="14">14年(168期)</option> <option value="15">15年(180期)</option> <option value="16">16年(192期)</option> <option value="17">17年(204期)</option> <option value="18">18年(216期)</option> <option value="19">19年(228期)</option> <option selected="selected" value="20">20年(240期)</option> <option value="21">21年(252期)</option> <option value="22">22年(264期)</option> <option value="23">23年(276期)</option> <option value="24">24年(288期)</option> <option value="25">25年(300期)</option> <option value="26">26年(312期)</option> <option value="27">27年(324期)</option> <option value="28">28年(336期)</option> <option value="29">29年(348期)</option> <option value="30">30年(360期)</option> </select> <em class="select_arrow"></em> </span> </p> </section> <section class="blockBtn"><a class="calBtn" href="javascript:void(0)">计算</a></section> </div> <!---计算结果start --> <div id="result" style="display:none"> <header class="headerBar"> <p class="white bold">计算结果</p> <a class="back backHide" href="javascript:;"></a> </header> <section class="resultBox"> <h1>等额本息还款方式</h1> <p>贷款总额<span id="debx_loanTotal" class="fr">0万元</span></p> <p>利息总额<span id="debx_lxTotal" class="fr">0万元</span></p> <p>还款总额<span id="debx_payTotal" class="fr">0万元</span></p> <p>月均还款<span id="debx_monthPay" class="fr">0万元</span></p> </section> <section class="resultBox"> <h1>等额本金还款方式</h1> <p>贷款总额<span id="debj_loanTotal" class="fr">0万元</span></p> <p>利息总额<span id="debj_lxTotal" class="fr">0万元</span></p> <p>还款总额<span id="debj_payTotal" class="fr">0万元</span></p> <p>首月还款<span id="debj_firstPay" class="fr">0万元</span></p> <p>未月还款<span id="debj_lastPay" class="fr">0万元</span></p> <p style="position:relative"> <span>每次月还款明细</span> <span class="sel clearfix"> <select id="debj_monthPay" class="debj_monthPay_select"> </select> </span> <em class="select_arrow"></em> </p> </section> <section class="blockBtn"><a class="backHide" href="javascript:;">返回</a></section> </div> <!--计算结果end --> <footer class="indexFooter"></footer> <!-- <section class="gotoTop"><img src="picture/gototop.png"/></section> --> <script type="text/javascript"> var cal = new Calculator(); var type = 2; //隐藏键盘 var hideKeyboard = function () { document.activeElement.blur(); }; $(function() { var price = $("#total").val() var firstPay=Math.round( price * parseFloat('0.3') * 100) / 100; $("#first").val(firstPay); var biz=Math.round((price - firstPay) * 100) / 100; $("#loanTotal").val(biz); var cal = new Calculator(), _options = '', _op; for (var r in cal.rate) { _op = cal.rate[r]; _options += "<option " + (r == 0 ? "selected='selected'" : "") + " value='" + r + "'>" + _op.title + "</option>"; } $(".loan_select").html(_options); refreshRate(); $("#years").on("change", function() { refreshRate(); }); $(".loan_select").on("change", function() { $(".loan_select").val($(this).val()); $("#rate").val($(this).find("option:selected").val()); refreshRate(); }); //房贷计算器切换 $(".calculator .option span").on("click", function () { $(".option span").removeClass("on"); $(this).addClass("on"); var index = $(this).index(); if (index == 0) { type = 2; $(".ggj").hide(); $(".dk").show(); fill(); } else if (index == 1) { type = 1; $(".dk").hide(); $(".ggj").show(); fill(); } else { type = 3; $(".ggj").show(); $(".dk").show(); $(".loan").val(0); } }); //更改房屋总价 $("#total").on("input", function (e) { var total = validValue("total"); var first = Math.round(total * parseFloat('0.3') * 100) / 100; $("#first").val(first); if (type != 3) { var loan = Math.round((total - first) * 100) / 100; $(".loan:visible").val(loan); } }); //更改首付金额 $("#first").on("input", fill); //计算 $(".calBtn").on("click", function () { hideKeyboard(); $("#edit").hide(); $("#result").fadeIn(); var property = {}; property.type = type; property.total = validValue("total"); property.firstPay = validValue("first"); property.acc = validValue("gjjLoanTotal"); property.biz = validValue("loanTotal"); property.rate = $("#rate").val(); property.year = $("#years").val(); property.calType = type; var data1 = cal.loanResult(property, 1); //本金 if (data1) { $("#debj_loanTotal").text(Math.round(data1.totalLoan * 100) / 100 + "万元"); $("#debj_lxTotal").text(Math.round(data1.interestPay * 100) / 100 + "万元"); $("#debj_payTotal").text(Math.round(data1.totalPay * 100) / 100 + "万元"); var m = 0, sel = $("#debj_monthPay").empty(); for (var i = 0; i < data1.month; i++) { m = Math.round(data1.perMonthPay[i].pay * 10000 * 100) / 100; if (i == 0) $("#debj_firstPay").text(m + "元"); else if (i == data1.month - 1) $("#debj_lastPay").text(m + "元"); $("<option>第" + (i + 1) + "期" + m + "元</option>").appendTo(sel); } } var data2 = cal.loanResult(property, 2); //本息 if (data2) { $("#debx_loanTotal").text(Math.round(data2.totalLoan * 100) / 100 + "万元"); $("#debx_lxTotal").text(Math.round(data2.interestPay * 100) / 100 + "万元"); $("#debx_payTotal").text(Math.round(data2.totalPay * 100) / 100 + "万元"); $("#debx_monthPay").text(Math.round(data2.perMonthPay * 10000 * 100) / 100 + "元"); } }); $(".backHide").on("click", function () { $("#result").hide(); $("#edit").fadeIn(); }); $("#total").on("input", function (e) { var total = validValue("total"); var first = Math.round(total * 0.3 * 100) / 100; $("#first").val(first); if (type != 3) { var loan = Math.round((total - first) * 100) / 100; $(".loan:visible").val(loan); } }); $("#first").on("input", fill); $(".emt input[type='number']").on("focus", function () { if ($.trim($(this).val()) == 0) { $(this).val(""); } }).on("blur", function () { if ($.trim($(this).val()).length == 0) { $(this).val("0"); } }); $(".calculator input").focus(function(){ if($(this).val()==0){ $(this).val("") }else{ $(this).select() } }); }); var fill = function (e) { var total = validValue("total"); var first = validValue("first"); if (type != 3) { var loan = Math.round((total - first) * 100) / 100; $(".loan:visible").val(loan); } }; //刷新利率 var refreshRate = function () { var year = $("#years").val(); var lv = $("#rate").val(); var rate = 0; rate = Math.round(cal.getRate(1, year, lv) * 100 * 100) / 100; $(".ratelv:eq(0)").text(rate + "%"); rate = Math.round(cal.getRate(2, year, lv) * 100 * 100) / 100; $(".ratelv:eq(1)").text(rate + "%"); }; var validValue = function (id) { var con = $("#" + id); var _val = $.trim(con.val()); if (_val.length == 0 || !/^\d+(\.{0,1}(\d+)?)?$/g.test(_val)) { _val=0; } return parseFloat(_val); } </script> </body> </html>