<!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>