liyaoyu
/
pfhwyigou


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

<style>
    #cnzz_stat_icon_1260633409{position:fixed;bottom:0;left:0;}
</style>
<div id="edit">
<!-- <header class="headerBar">
	<p class="white bold">房贷计算</p>
    <a class="back" href="javascript:history.go(-1);"></a>
</header> -->


<div class="y_header">
    <div class="header_back"><a href="javascript:history.back(-1)"><img src="/image/v2/dh1.png"></a></div>
    <div class="header_logo2"><a href="/"><img src="/image/v2/index01.png"></a></div>
    <div class="header_menu"><a></a></div>
</div>
<!-- 侧边栏 -->
<?php $this->beginContent('@app/views/public/navsidebar.php'); ?>
<?php $this->endContent(); ?>
<div class="navsidebar" style="height:55px;"></div>


<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">
<div class="y_header">
    <div class="header_back"><a  class="back backHide" href="javascript:;"><img src="/image/v2/dh1.png"></a></div>
    <div class="header_logo3">计算结果</div>
    <!-- <div class="header_menu"><a></a></div> -->
</div>
<div style="height:50px;"></div>


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