仿安居客房贷计算器

来源:互联网 发布:长江现货铜价 数据接口 编辑:程序博客网 时间:2024/04/29 10:57

最近领导分配了一个房贷计算器的需求给我,我将安居客的房贷计算器拷贝下来了,在本地能运行,导入到项目就各种报错,它的js用不了,没办法只有自己写js了,样式用的是安居客的样式,当然导入进来难免有些样式冲突,还好本人前端有点功底,都一一解决了,下面上一张效果图


页面代码:


<div class="w1180">   <div class="calcontent" style="height:540px;">      <div class="calleft" id="calleft">         <i class="icon-arrow"><span></span></i>         <div class="item-mod item-top">            <label class="item-label"><i class="icon icon-help" id="repaytype-tips"></i><span>还款方式</span></label>            <span><input type="radio" name="repaytype" class="int-radio r1" value="1" checked="true">等额本息</span><span><input type="radio" name="repaytype" class="int-radio" value="2">等额本金</span>         </div>         <div class="item-mod">            <label class="item-label"><span>贷款类别</span></label>            <span><input name="loantype" id="loantype1" type="radio" class="int-radio r1" value="1" checked="true">公积金贷</span><span><input type="radio" name="loantype" id="loantype2" class="int-radio" value="2">商业贷款</span><span><input type="radio" name="loantype" id="loantype3" class="int-radio" value="3">组合贷</span>         </div>         <div class="item-mod" id="calType">            <label class="item-label"><span>计算方式</span></label>            <span><input type="radio" name="caltype" id="caltype1" class="int-radio r1" value="1" checked="true">根据贷款总额</span><span><input type="radio" name="caltype" id="caltype2" class="int-radio" value="2">根据按揭比例</span>         </div>         <div class="item-mod" id="totalCapital">            <label class="item-label"><span>贷款总额</span></label>            <div class="textbox"><input type="text" value="100" maxlength="9" name="total-capital"><em>万元</em></div>            <span class="warn" style="display: none;">金额必须为数字</span>            <span class="warn"></span>         </div>         <div class="item-mod adTop" id="gjjCapital" style="display:none;">            <label class="item-label"><span>贷款金额</span></label>            <span class="pre-detail">使用公积金贷款</span>            <div class="textbox mid"><input type="text" value="100" maxlength="9" name="gjj-capital"><em>万元</em></div>            <span class="warn" style="display: none;">金额必须为数字</span>            <span class="warn"></span>         </div>         <div class="item-mod adTop" id="bizCapital" style="display:none;">            <span class="pre-detail">使用商业性贷款</span>            <div class="textbox mid"><input type="text" value="100" maxlength="9" name="biz-capital"><em>万元</em></div>            <span class="warn" style="display: none;">金额必须为数字</span>            <span class="warn"></span>         </div>         <div class="item-mod adTop pop" id="capitalPercent" style="display:none;">            <label class="item-label"><span>首付比例</span></label>            <div  id="prePay" style="z-index: 1;">               <select style="height: 32px;width:270px;border: 1px solid #e3e3e3;font-family:Microsoft YaHei;font-size: 14px;">                  <option value="0.1">1&nbsp;</option>                  <option value="0.2">2&nbsp;</option>                  <option value="0.3" selected="selected">3&nbsp;</option>                  <option value="0.4">4&nbsp;</option>                  <option value="0.5">5&nbsp;</option>                  <option value="0.6">6&nbsp;</option>                  <option value="0.7">7&nbsp;</option>                  <option value="0.8">8&nbsp;</option>                  <option value="0.9">9&nbsp;</option>               </select>               </div><span class="warn"></span>         </div>         <div class="item-mod adTop pop">            <label class="item-label"><span>按揭年数</span></label>            <div  style="z-index: 1;">               <select id="loanTime" style="height: 32px;width:270px;border: 1px solid #e3e3e3;font-family:Microsoft YaHei;font-size: 14px;">                  <option value="6">6个月(6期)</option>                  <option value="12">1年(12期)</option>                  <option value="24">2年(24期)</option>                  <option value="36">3年(36期)</option>                  <option value="48">4年(48期)</option>                  <option value="60">5年(60期)</option>                  <option value="72">6年(72期)</option>                  <option value="84">7年(84期)</option>                  <option value="96">8年(96期)</option>                  <option value="108">9年(108期)</option>                  <option value="120">10年(120期)</option>                  <option value="132">11年(132期)</option>                  <option value="144">12年(144期)</option>                  <option value="156">13年(156期)</option>                  <option value="168">14年(168期)</option>                  <option value="180">15年(180期)</option>                  <option value="192">16年(192期)</option>                  <option value="204">17年(204期)</option>                  <option value="216">18年(216期)</option>                  <option value="228">19年(228期)</option>                  <option value="240" selected="selected">20年(240期)</option>                  <option value="300">25年(300期)</option>                  <option value="360">30年(360期)</option>               </select>               </div><span class="warn"></span>         </div>         <div class="item-mod adTop" id="bizRate" style="display:none;">            <label class="item-label"><i class="icon icon-help" id="biz-help"></i><span>商贷利率</span></label>            <div class="textbox short"><input type="text" id="bizRateValue" value="5.15" maxlength="9" name="biz-rate"></div>            <span>&nbsp;%</span>            <span class="warn" style="display: none;">利率必须为数字</span>            <span class="warn" style="display: none;">利率必须在0-100%之间</span>            <span class="warn" style="display: none;">利率不能为空</span>            <span class="warn"></span>         </div>         <div class="item-mod adTop" id="gjjRate">            <label class="item-label"><i class="icon icon-help" id="gjj-help"></i><span>利率</span></label>            <div class="textbox short"><input type="text" value="3.25" id="gjjRateValue" maxlength="9" name="gjj-rate"></div>            <span>&nbsp;%</span><span class="warn" style="display: none;">利率必须为数字</span>            <span class="warn" style="display: none;">利率必须在0-100%之间</span>            <span class="warn" style="display: none;">利率不能为空</span>            <span class="warn"></span>         </div>         <div class="item-mod" id="discount">            <span><input checked="checked" type="radio"  name="discount"  class="int-radio r1" value="1">基准利率</span>            <span style="display:none;"><input type="radio" name="discount" class="int-radio" value="0.85">首套优惠85</span>            <span style="display:none;"><input type="radio" name="discount" class="int-radio" value="0.95">首套优惠95</span>         </div>         <div class="item-mod" id="discount-part2">            <span><input type="radio" name="discount"  class="int-radio r1" value="1.1">第二套房利率</span>         </div>         <div class="item-bot" id="clickBtn">            <input type="hidden" value="true" id="validateTotalCapital"/>            <input type="hidden" value="true" id="validateGjjCapital"/>            <input type="hidden" value="true" id="validateBizCapital"/>            <input type="hidden" value="true" id="validateGjjRate"/>            <input type="hidden" value="true" id="validateBizRate"/>            <a class="cal-button" href="javascript:" id="startCal">开始计算</a><a class="cal-reset" href="javascript:" id="resetCal">清空重填</a>         </div>      </div>      <div class="calright">         <div id="caldefault" class="default" >            <i></i><p>要贷款买房?赶紧算算吧!</p>         </div>         <div class="resultContent" id="result-table" style="display:none">            <div id="table-wrap">            </div>            <p class="result-tip"><i class="icon icon-help" id="result-help"></i>* 以上结果仅供参考</p>         </div>      </div>   </div></div>
<div style="position: absolute; z-index: 10000; width: 440px; left: 427.5px; top: 268px;display: none" id="gjjRateIntroduction">   <div class="tooltip-wrap">      <div class="tooltip-arrow arr-bottom" style="right: initial; left: 19px;">         <div class="tooltip-arrowbg"></div>      </div>      <div class="tooltip-msg">根据2015826日最新银行利率:公积金[5年以下:2.75%(包括5年),5年以上:3.25%];商业贷款[0~1年:4.60%(包括1年),1~5年:5.00%(包括5年),5年以上:5.15%]</div>   </div></div><div style="position: absolute; z-index: 10000; width: 440px; left: 400.5px; top: 165px;display: none" id="repayTypeIntroduction">   <div class="tooltip-wrap"><div class="tooltip-arrow arr-top" style="right: initial; left: 19px;">      <div class="tooltip-arrowbg"></div></div>      <div class="tooltip-msg"><span style="color:#333">等额本息:</span>         等额本息还款,也称定期付息,即借款人每月按相等的金额偿还贷款本息,其中每月贷款利息按月初剩余贷款本金计算并逐月结清。<br>         <span style="color:#333">等额本金:</span>         又称利随本清、等本不等息还款法。贷款人将本金分摊到每个月内,同时付清上一交易日至本次还款日之间的利息。</div>   </div></div><div style="position: absolute; z-index: 10000; width: 440px; left: 1018.5px; top: 303px; display: none;" id="resultIntroduction">   <div class="tooltip-wrap"><div class="tooltip-arrow arr-bottom" style="right: initial; left: 19px;">      <div class="tooltip-arrowbg"></div></div><div class="tooltip-msg"><span style="color:#333">温馨提示:</span>      <br>1 本结果按照房贷计算器2015最新利率计算。      <br>2 对已贷款购买一套住房但人均面积低于当地平均水平,再申请购买第二套普通自住房的居民,比照执行首次贷款购买普通自住房的优惠政策。      <br>3 根据2015826日最新决定,下调人民币存贷款基准利率0.25个百分点(已更新至最新利率)。   </div></div></div>



引入的js代码:


/** * 根据2015826日最新银行利率:公积金[5年以下:2.75%(包括5年),5年以上:3.25%] * 商业贷款[0~1年:4.60%(包括1年),1~5年:5.00%(包括5年),5年以上:5.15%] * @type {number} */var gjjRate_discount_lt5 = 2.75;//公积金<=5年基准利率var gjjRate_discount_gt5 = 3.25;//公积金>5年基准利率var gjjRate_discount_part2_lt5 = 3.03;//公积金<=5年第二套房利率var gjjRate_discount_part2_gt5 = 3.58;//公积金>5年第二套房利率var bizRate_discount_lt1 = '4.60';//商业贷款<=1年基准利率var bizRate_discount_gt1lt5 = '5.00';//商业贷款>1<=5年基准利率var bizRate_discount_gt5 = 5.15;//商业贷款>5年基准利率var bizRate_discount_part2_lt1 = 5.06;//商业贷款<=1年第二套房利率var bizRate_discount_part2_gt1lt5 = '5.50';//商业贷款>1<=5年第二套房利率var bizRate_discount_part2_gt5 = 5.67;//商业贷款>5年第二套房利率var reg = new RegExp("^[0-9]+(.[0-9]{1,8})?$");//验证有1-8位小数的正实数$(function(){    $("title").text("房贷计算器_实用工具");//计算方式-根据贷款总额$("#caltype1").click(function(){    $("#gjjRateIntroduction").css({top:"268px",left:"425.5px"});    $("#resultIntroduction").css({top: "303px"});    $("#caltype1").attr("checked","true");    $("#caltype2").attr("checked","false");    $("#totalCapital span:first").html('').html("贷款总额");    $("#capitalPercent").css({display:"none"});});//计算方式-根据按揭比例$("#caltype2").click(function(){    $("#gjjRateIntroduction").css({top:"313px",left:"425.5px"});    $("#resultIntroduction").css({top: "395px"});    $("#caltype1").attr("checked","false");    $("#caltype2").attr("checked","true");    $("#totalCapital span:first").html('').html("房屋总价");    $("#capitalPercent").css({display:"block"});});//贷款类别-公积金贷$("#loantype1").click(function(){    rateDisplay();    initValidateValue();    $("#resultIntroduction").css({top: "303px"});    $("#gjjRateIntroduction").css({top:"268px",left:"425.5px"});    $("#totalCapital span:first").html('').html("贷款总额");    $("#totalCapital span:eq(1)").css({display:"none"});    $("#gjjCapital span:eq(2)").css({display:"none"});    $("#bizCapital span:eq(1)").css({display:"none"});    $("#capitalPercent").css({display:"none"});    $("#gjjCapital").css({display:"none"});    $("#bizCapital").css({display:"none"});    $("#calType").css({display:"block"});    $("#totalCapital").css({display:"block"});    $("#bizRate").css({display:"none"});    $("#discount").css({display:"block"});    $("#discount input:first").prop("checked",true);    $("#calType input:first").prop("checked",true);    $("#discount-part2").css({display:"block"});    $("#gjjRate span:first").html('').html("利率");    var loanTime = $("#loanTime").val();    var discount = $("input[name='discount']:checked").val();    if(loanTime <= 60){//贷款时间小于5年,利率为2.75        if(discount == 1){//基准利率            $("#gjjRateValue").val(gjjRate_discount_lt5);        }else{//第二套房利率            $("#gjjRateValue").val(gjjRate_discount_part2_lt5);        }    }else{        if(discount == 1){//基准利率            $("#gjjRateValue").val(gjjRate_discount_gt5);        }else{//第二套房利率            $("#gjjRateValue").val(gjjRate_discount_part2_gt5);        }    }    $("#discount span:gt(0)").css({display:"none"});});//贷款类别-商业贷款$("#loantype2").click(function(){    rateDisplay();    initValidateValue();    $("#resultIntroduction").css({top: "303px"});    $("#gjjRateIntroduction").css({top:"268px",left:"425.5px"});    $("#totalCapital span:first").html('').html("贷款总额");    $("#totalCapital span:eq(1)").css({display:"none"});    $("#gjjCapital span:eq(2)").css({display:"none"});    $("#bizCapital span:eq(1)").css({display:"none"});    $("#capitalPercent").css({display:"none"});    $("#gjjCapital").css({display:"none"});    $("#bizCapital").css({display:"none"});    $("#calType").css({display:"block"});    $("#totalCapital").css({display:"block"});    $("#bizRate").css({display:"none"});    $("#discount").css({display:"block"});    $("#discount-part2").css({display:"block"});    $("#calType input:first").prop("checked",true);    $("#gjjRate span:first").html('').html("利率");    var loanTime = $("#loanTime").val();    var discount = $("input[name='discount']:checked").val();    if(loanTime <= 12){//贷款时间小于1年,利率为4.60        if(discount == 1) {//基准利率            $("#gjjRateValue").val(bizRate_discount_lt1);        }else if(discount == 0.95){            $("#gjjRateValue").val((bizRate_discount_lt1*0.95).toFixed(2));        }else if(discount == 0.85){            $("#gjjRateValue").val((bizRate_discount_lt1*0.85).toFixed(2));        }else{//第二套房利率            $("#gjjRateValue").val(bizRate_discount_part2_lt1);        }    }else if(loanTime > 12 && loanTime <= 60){        if(discount == 1) {//基准利率            $("#gjjRateValue").val(bizRate_discount_gt1lt5);        }else if(discount == 0.95){            $("#gjjRateValue").val((bizRate_discount_gt1lt5*0.95).toFixed(2));        }else if(discount == 0.85){            $("#gjjRateValue").val((bizRate_discount_gt1lt5*0.85).toFixed(2));        }else{//第二套房利率            $("#gjjRateValue").val(bizRate_discount_part2_gt1lt5);        }    }else{        if(discount == 1) {//基准利率            $("#gjjRateValue").val(bizRate_discount_gt5);        }else if(discount == 0.95){            $("#gjjRateValue").val((bizRate_discount_gt5*0.95).toFixed(2));        }else if(discount == 0.85){            $("#gjjRateValue").val((bizRate_discount_gt5*0.85).toFixed(2));        }else{//第二套房利率            $("#gjjRateValue").val(bizRate_discount_part2_gt5);        }    }    $("#discount span:gt(0)").css({display:"inline"});});//贷款类别-组合贷$("#loantype3").click(function(){    rateDisplay();    initValidateValue();    $("#totalCapital span:eq(1)").css({display:"none"});    $("#gjjCapital span:eq(2)").css({display:"none"});    $("#bizCapital span:eq(1)").css({display:"none"});    $("#capitalPercent").css({display:"none"});    $("#resultIntroduction").css({top: "350px"});    $("#gjjRate span:first").html('').html("公积金利率");    $("#calType").css({display:"none"});    $("#totalCapital").css({display:"none"});    $("#gjjCapital").css({display:"block"});    $("#bizCapital").css({display:"block"});    $("#bizRate").css({display:"block"});    $("#discount").css({display:"none"});    $("#discount-part2").css({display:"none"});    var loanTime = $("#loanTime").val();    if(loanTime <= 12){//贷款时间小于1年,利率为4.60        $("#bizRateValue").val(bizRate_discount_lt1);        $("#gjjRateValue").val(gjjRate_discount_lt5);    }else if(loanTime > 12 && loanTime <= 60){        $("#bizRateValue").val(bizRate_discount_gt1lt5);        $("#gjjRateValue").val(gjjRate_discount_lt5);    }else{        $("#bizRateValue").val(bizRate_discount_gt5);        $("#gjjRateValue").val(gjjRate_discount_gt5);    }    $("#discount input:first").attr("checked",true);    $("#discount span:gt(0)").css({display:"none"});});//基准利率$("#discount input:first").click(function(){    rateDisplay();    //获取当前的贷款类别    var loantype = $("input[name='loantype']:checked").val();    var loanTime = $("#loanTime").val();    if(loantype == 1){//公积金贷款        if(loanTime <= 60){//贷款时间小于5年,利率为2.75            $("#gjjRateValue").val(gjjRate_discount_lt5);        }else{//贷款时间大于5年,利率为3.25            $("#gjjRateValue").val(gjjRate_discount_gt5);        }    }else if(loantype == 2){//商业贷款,基准利率为5.15        if(loanTime <= 12){//贷款时间小于1年,利率为4.60            $("#gjjRateValue").val(bizRate_discount_lt1);        }else if(loanTime > 12 && loanTime <= 60){            $("#gjjRateValue").val(bizRate_discount_gt1lt5);        }else{            $("#gjjRateValue").val(bizRate_discount_gt5);        }    }});//首套优惠85$("#discount input:eq(1)").click(function(){    rateDisplay();    //获取当前的贷款类别    var loantype = $("input[name='loantype']:checked").val();    var loanTime = $("#loanTime").val();    if(loantype == 1){//公积金贷款        if(loanTime <= 60){//贷款时间小于5年,利率为2.75            $("#gjjRateValue").val((gjjRate_discount_lt5*0.85).toFixed(2));        }else{//贷款时间大于5年,利率为3.25            $("#gjjRateValue").val((gjjRate_discount_gt5*0.85).toFixed(2));        }    }else if(loantype == 2){//商业贷款,基准利率为5.15        if(loanTime <= 12){//贷款时间小于1年,利率为4.60            $("#gjjRateValue").val((bizRate_discount_lt1*0.85).toFixed(2));        }else if(loanTime > 12 && loanTime <= 60){            $("#gjjRateValue").val((bizRate_discount_gt1lt5*0.85).toFixed(2));        }else{            $("#gjjRateValue").val((bizRate_discount_gt5*0.85).toFixed(2));        }    }});//首套优惠95$("#discount input:eq(2)").click(function(){    rateDisplay();    //获取当前的贷款类别    var loantype = $("input[name='loantype']:checked").val();    var loanTime = $("#loanTime").val();    if(loantype == 1){//公积金贷款        if(loanTime <= 60){//贷款时间小于5年,利率为2.75            $("#gjjRateValue").val((gjjRate_discount_lt5*0.95).toFixed(2));        }else{//贷款时间大于5年,利率为3.25            $("#gjjRateValue").val((gjjRate_discount_gt5*0.95).toFixed(2));        }    }else if(loantype == 2){//商业贷款,基准利率为5.15        if(loanTime <= 12){//贷款时间小于1年,利率为4.60            $("#gjjRateValue").val((bizRate_discount_lt1*0.95).toFixed(2));        }else if(loanTime > 12 && loanTime <= 60){            $("#gjjRateValue").val((bizRate_discount_gt1lt5*0.95).toFixed(2));        }else{            $("#gjjRateValue").val((bizRate_discount_gt5*0.95).toFixed(2));        }    }});//第二套房利率$("#discount-part2 input:first").click(function(){    rateDisplay();    //获取当前的贷款类别    var loantype = $("input[name='loantype']:checked").val();    var loanTime = $("#loanTime").val();    if(loantype == 1){//公积金贷款        if(loanTime <= 60){//贷款时间小于5年,利率为3.03            $("#gjjRateValue").val(gjjRate_discount_part2_lt5);        }else{//贷款时间大于5年,利率为3.58            $("#gjjRateValue").val(gjjRate_discount_part2_gt5);        }    }else if(loantype == 2){//商业贷款        if(loanTime <= 12){//贷款时间小于1年,利率为5.06            $("#gjjRateValue").val(bizRate_discount_part2_lt1);        }else if(loanTime > 12 && loanTime <= 60){//贷款时间大于1年,小于5年,利率为5.50            $("#gjjRateValue").val(bizRate_discount_part2_gt1lt5);        }else{//贷款时间大于5年,利率为5.67            $("#gjjRateValue").val(bizRate_discount_part2_gt5);        }    }});$("#loanTime").change(function(){    rateDisplay();    var loanTime = $("#loanTime").val();    //获取当前的贷款类别    var loantype = $("input[name='loantype']:checked").val();    var discount = $("input[name='discount']:checked").val();    if(loantype == 1){//公积金贷款        if(loanTime <= 60){//贷款时间小于5年,利率为2.75            if(discount == 1){//基准利率                $("#gjjRateValue").val(gjjRate_discount_lt5);            }else{//第二套房利率                $("#gjjRateValue").val(gjjRate_discount_part2_lt5);            }        }else{            if(discount == 1){//基准利率                $("#gjjRateValue").val(gjjRate_discount_gt5);            }else{//第二套房利率                $("#gjjRateValue").val(gjjRate_discount_part2_gt5);            }        }    }else if(loantype == 2){//商业贷款        if(loanTime <= 12){//贷款时间小于1年,利率为4.60            if(discount == 1) {//基准利率                $("#gjjRateValue").val(bizRate_discount_lt1);            }else if(discount == 0.95){                $("#gjjRateValue").val((bizRate_discount_lt1*0.95).toFixed(2));            }else if(discount == 0.85){                $("#gjjRateValue").val((bizRate_discount_lt1*0.85).toFixed(2));            }else{//第二套房利率                $("#gjjRateValue").val(bizRate_discount_part2_lt1);            }        }else if(loanTime > 12 && loanTime <= 60){            if(discount == 1) {//基准利率                $("#gjjRateValue").val(bizRate_discount_gt1lt5);            }else if(discount == 0.95){                $("#gjjRateValue").val((bizRate_discount_gt1lt5*0.95).toFixed(2));            }else if(discount == 0.85){                $("#gjjRateValue").val((bizRate_discount_gt1lt5*0.85).toFixed(2));            }else{//第二套房利率                $("#gjjRateValue").val(bizRate_discount_part2_gt1lt5);            }        }else{            if(discount == 1) {//基准利率                $("#gjjRateValue").val(bizRate_discount_gt5);            }else if(discount == 0.95){                $("#gjjRateValue").val((bizRate_discount_gt5*0.95).toFixed(2));            }else if(discount == 0.85){                $("#gjjRateValue").val((bizRate_discount_gt5*0.85).toFixed(2));            }else{//第二套房利率                $("#gjjRateValue").val(bizRate_discount_part2_gt5);            }        }    }else if(loantype == 3){//组合贷        if(loanTime <= 12){//贷款时间小于1年,利率为4.60            if(discount == 1) {//基准利率                $("#bizRateValue").val(bizRate_discount_lt1);                $("#gjjRateValue").val(gjjRate_discount_lt5);            }else{                $("#bizRateValue").val(bizRate_discount_part2_lt1);                $("#gjjRateValue").val(gjjRate_discount_part2_lt5);            }        }else if(loanTime > 12 && loanTime <= 60){            if(discount == 1) {//基准利率                $("#bizRateValue").val(bizRate_discount_gt1lt5);                $("#gjjRateValue").val(gjjRate_discount_lt5);            }else{                $("#bizRateValue").val(bizRate_discount_gt5);                $("#gjjRateValue").val(gjjRate_discount_gt5);            }        }else{            if(discount == 1) {//基准利率                $("#bizRateValue").val(bizRate_discount_gt5);                $("#gjjRateValue").val(gjjRate_discount_gt5);            }else{                $("#bizRateValue").val(bizRate_discount_part2_gt5);                $("#gjjRateValue").val(gjjRate_discount_part2_gt5);            }        }    }});//清空重填$("#resetCal").click(function(){    $("#caldefault").css({display:"block"});    $("#result-table").css({display:"none"});    $("#gjjCapital").css({display:"none"});    $("#bizCapital").css({display:"none"});    $("#calType").css({display:"block"});    $("#totalCapital").css({display:"block"});    $("#bizRate").css({display:"none"});    $("#discount").css({display:"block"});    $("#discount-part2").css({display:"block"});    rateDisplay();    initValidateValue();    $("#gjjRateIntroduction").css({top:"265px",left:"425.5px"});    $("#totalCapital span:eq(1)").css({display:"none"});    $("#gjjCapital span:eq(2)").css({display:"none"});    $("#bizCapital span:eq(1)").css({display:"none"});    $("#gjjCapital input:first").val(100);    $("#bizCapital input:first").val(100);    $("#loanTime").val(240);    $("#capitalPercent select:first").val(0.3);    $("#capitalPercent").css({display:"none"});    $("#caltype1").prop("checked",true);    $("#totalCapital input:first").val(100);    $("#gjjRateValue").val(gjjRate_discount_gt5);    $("#discount input:first").prop("checked",true);    $("#calleft input:first").prop("checked",true);    $("#loantype1").prop("checked",true);});$("#totalCapital input:first").blur(function(){    var totalCapital = $("#totalCapital input:first").val();//贷款总额    if(!reg.test(totalCapital.trim())){        $("#totalCapital span:eq(1)").css({display:"inline"});        $("#validateTotalCapital").val('false');    }else{        $("#totalCapital span:eq(1)").css({display:"none"});        $("#validateTotalCapital").val('true');    }});$("#gjjCapital input:first").blur(function(){    var gjjCapital = $("#gjjCapital input:first").val();//公积金贷款    if(!reg.test(gjjCapital.trim())){        $("#gjjCapital span:eq(2)").css({display:"inline"});        $("#validateGjjCapital").val('false');    }else{        $("#gjjCapital span:eq(2)").css({display:"none"});        $("#validateGjjCapital").val('true');    }});$("#bizCapital input:first").blur(function(){    var bizCapital = $("#bizCapital input:first").val();//商业性贷款    if(!reg.test(bizCapital.trim())){        $("#bizCapital span:eq(1)").css({display:"inline"});        $("#validateBizCapital").val('false');    }else{        $("#bizCapital span:eq(1)").css({display:"none"});        $("#validateBizCapital").val('true');    }});$("#gjjRate input:first").blur(function(){    var gjjRate = $("#gjjRate input:first").val();//利率    if(gjjRate == ''){//利率不能为空        $("#gjjRate span:eq(2)").css({display:"none"});        $("#gjjRate span:eq(3)").css({display:"none"});        $("#gjjRate span:eq(4)").css({display:"inline"});        $("#validateGjjRate").val('false');        return;    }else{        $("#gjjRate span:eq(4)").css({display:"none"});        $("#validateGjjRate").val('true');        if(!reg.test(gjjRate)){//利率必须为数字,最多两位小数            $("#gjjRate span:eq(3)").css({display:"none"});            $("#gjjRate span:eq(4)").css({display:"none"});            $("#gjjRate span:eq(2)").css({display:"inline"});            $("#validateGjjRate").val('false');            return;        }else{            $("#gjjRate span:eq(2)").css({display:"none"});            $("#validateGjjRate").val('true');            if(gjjRate >= 100 || gjjRate <= 0 || gjjRate > 99.99){//利率必须在0-100%之间                $("#gjjRate span:eq(2)").css({display:"none"});                $("#gjjRate span:eq(4)").css({display:"none"});                $("#gjjRate input:first").val(parseFloat(gjjRate).toFixed(2));                $("#gjjRate span:eq(3)").css({display:"inline"});                $("#validateGjjRate").val('false');                return;            }else{                $("#gjjRate span:eq(3)").css({display:"none"});                $("#validateGjjRate").val('true');                $("#gjjRate input:first").val(parseFloat(gjjRate).toFixed(2));            }        }    }});$("#bizRate input:first").blur(function(){    var bizRate = $("#bizRate input:first").val();//商贷利率    if(bizRate == ''){//利率不能为空        $("#bizRate span:eq(2)").css({display:"none"});        $("#bizRate span:eq(3)").css({display:"none"});        $("#bizRate span:eq(4)").css({display:"inline"});        $("#validateBizRate").val('false');        return;    }else{        $("#bizRate span:eq(4)").css({display:"none"});        $("#validateBizRate").val('true');        if(!reg.test(bizRate)){//利率必须为数字,最多两位小数            $("#bizRate span:eq(3)").css({display:"none"});            $("#bizRate span:eq(4)").css({display:"none"});            $("#bizRate span:eq(2)").css({display:"inline"});            $("#validateBizRate").val('false');            return;        }else{            $("#bizRate span:eq(2)").css({display:"none"});            $("#validateBizRate").val('true');            if(bizRate >= 100 || bizRate <= 0  || bizRate > 99.99){//利率必须在0-100%之间                $("#bizRate span:eq(2)").css({display:"none"});                $("#bizRate span:eq(4)").css({display:"none"});                $("#bizRate input:first").val(parseFloat(bizRate).toFixed(2));                $("#bizRate span:eq(3)").css({display:"inline"});                $("#validateBizRate").val('false');                return;            }else{                $("#bizRate span:eq(3)").css({display:"none"});                $("#validateBizRate").val('true');                $("#bizRate input:first").val(parseFloat(bizRate).toFixed(2));            }        }    }});//开始计算$("#startCal").click(function(){    var validateTotalCapital = $("#validateTotalCapital").val();    var validateGjjCapital = $("#validateGjjCapital").val();    var validateBizCapital = $("#validateBizCapital").val();    var validateGjjRate = $("#validateGjjRate").val();    var validateBizRate = $("#validateBizRate").val();    if("true" != validateTotalCapital || "true" != validateGjjCapital || "true" != validateBizCapital || "true" != validateGjjRate || "true" != validateBizRate){//数值输入有误,不进行计算        return;    }    $("#caldefault").css({display:"none"});    $("#result-table").css({display:"block"});    var totalCapital = $("#totalCapital input:first").val();//贷款总额    var gjjCapital = $("#gjjCapital input:first").val();//公积金贷款    var bizCapital = $("#bizCapital input:first").val();//商业性贷款    var bizRate = $("#bizRate input:first").val();//商贷利率    var gjjRate = $("#gjjRate input:first").val();//利率    var repaytype = $("input[name='repaytype']:checked").val();//还款方式(1.等额本息 2.等额本金)    var loantype = $("input[name='loantype']:checked").val();//贷款方式(1.公积金贷 2.商业贷款 3.组合贷)    var caltype = $("input[name='caltype']:checked").val();//计算方式(1.根据贷款总额 2.根据按揭比例)    var capitalPercent = $("#capitalPercent select:first").val();//首付比例    var loanTime = $("#loanTime").val();//按揭期数    var tableHtml;    var monthRepay;//月均还款    var totalRepay;//还款总额    var totalInterest;//支付利息    var totalMoney;//贷款总额    if(caltype == 1){//根据贷款总额        totalMoney = totalCapital*10000;    }else{//根据按揭比例        totalMoney = (totalCapital - capitalPercent*totalCapital)*10000;    }    if(repaytype == 1){//等额本息        if(loantype == 1 || loantype == 2){//公积金贷款或商业贷款            var monthRate = gjjRate/100/12;            var money =  Math.pow(1+monthRate,loanTime);            /**             * 等额本息月还款计算公式             * 月还款额=〔贷款本金×月利率×1+月利率)^还款月数〕÷〔(1+月利率)^还款月数-1             *             */            monthRepay = totalMoney*monthRate*money/(money-1);            totalRepay = (monthRepay * loanTime);            totalInterest = totalRepay - totalMoney;            if(caltype == 1){//根据贷款总额                tableHtml = '<table>'                +' <thead>'                +' <tr><td colspan="2">等额本息</td></tr>'                +' </thead>'                +' <tbody>'                +' <tr><th>贷款总额</th><td><em>'+totalCapital+'</em>万元</td></tr>';                if(loantype == 1){                    tableHtml+='<tr><th>公积金贷款利率</th><td>'+gjjRate+' %</td></tr>';                }else{                    tableHtml+='<tr><th>商业贷款利率</th><td>'+gjjRate+' %</td></tr>';                }                tableHtml+=' <tr><th>还款总额</th><td><em>'+(totalRepay/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>支付利息</th><td><em>'+(totalInterest/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>贷款月数</th><td><em>'+loanTime+'</em></td></tr>'                +' <tr><th>月均还款</th><td><em>'+monthRepay.toFixed(2)+'</em></td></tr>'                +' </tbody>'                +' </table>';            }else{//根据按揭比例                var downPayment = capitalPercent*totalCapital;//首付款                tableHtml = '<table>'                +' <thead><tr><td colspan="2">等额本息</td></tr></thead>'                +' <tbody>'                +' <tr><th>房款总额</th><td><em>'+totalCapital+'</em>万元</td></tr>'                +' <tr><th>首付款</th><td><em>'+downPayment.toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>贷款总额</th><td><em>'+(totalMoney/10000).toFixed(2)+'</em>万元</td></tr>';                if(loantype == 1){                    tableHtml+='<tr><th>公积金贷款利率</th><td>'+gjjRate+' %</td></tr>';                }else{                    tableHtml+='<tr><th>商业贷款利率</th><td>'+gjjRate+' %</td></tr>';                }                tableHtml+=' <tr><th>还款总额</th><td><em>'+(totalRepay/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>支付利息</th><td><em>'+(totalInterest/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>贷款月数</th><td><em>'+loanTime+'</em></td></tr>'                +'  <tr><th>月均还款</th><td><em>'+monthRepay.toFixed(2)+'</em></td></tr>'                +' </tbody>'                +' </table>';            }            $("#table-wrap").html('').html(tableHtml);        }else{//组合贷            var gjj_monthRate = gjjRate/100/12;//公积金月利率            var biz_monthRate = bizRate/100/12;//商业贷款月利率            var gjj_money =  Math.pow(1+gjj_monthRate,loanTime);            var biz_money =  Math.pow(1+biz_monthRate,loanTime);            var gjj_monthRepay = gjjCapital*10000*gjj_monthRate*gjj_money/(gjj_money-1);//公积金月还款            var biz_monthRepay = bizCapital*10000*biz_monthRate*biz_money/(biz_money-1);//公积金月还款            monthRepay = gjj_monthRepay + biz_monthRepay;//总共月还款            totalRepay = (monthRepay * loanTime)/10000;//还款总额            totalInterest = totalRepay - (parseFloat(gjjCapital) + parseFloat(bizCapital));//支付利息            tableHtml ='<table>'                +'<thead><tr><td colspan="2">等额本息</td></tr></thead>'                +'<tbody>'                +'<tr><th>贷款总额</th><td><em>'+(parseFloat(gjjCapital) + parseFloat(bizCapital))+'</em>万元</td></tr>'                +'<tr><th>公积金贷款利率</th><td>'+gjjRate+' %</td></tr>'                +'<tr><th>商业贷款利率</th><td>'+bizRate+' %</td></tr>'                +'<tr><th>还款总额</th><td><em>'+totalRepay.toFixed(2)+'</em>万元</td></tr>'                +'<tr><th>支付利息</th><td><em>'+totalInterest.toFixed(2)+'</em>万元</td></tr>'                +'<tr><th>贷款月数</th><td><em>'+loanTime+'</em></td></tr>'                +'<tr><th>月均还款</th><td><em>'+monthRepay.toFixed(2)+'</em></td></tr>'                +'</tbody>'                +'</table>';            $("#table-wrap").html('').html(tableHtml);        }    }else{//等额本金        /**            等额本金计算方式            设贷款额为a,月利率为i,还款月数为n            支付利息=n+1*a*i/2            还款总额=n+1*a*i/2+a            计划月还款额=(贷款本金÷还款月数)+(贷款本金-累计已还本金月利率            累计已还本金=已经归还贷款的月数×贷款本金/还款月数        */        var firstRepay;//首月还款        var lastRepay;//末月还款        if(loantype == 1 || loantype == 2){//公积金贷款或商业贷款            var monthRate = gjjRate/100/12;            firstRepay = (totalMoney/loanTime)+totalMoney*monthRate;            lastRepay = (totalMoney/loanTime)+(totalMoney-(parseInt(loanTime)-1)*(totalMoney/loanTime))*monthRate;            totalInterest = ((parseInt(loanTime)+1)*totalMoney*monthRate)/2;//总利息            totalRepay = totalInterest + totalMoney;            if(caltype == 1){//根据贷款总额                tableHtml = '<table>'                +' <thead>'                +' <tr><td colspan="2">等额本金</td></tr>'                +' </thead>'                +' <tbody>'                +' <tr><th>贷款总额</th><td><em>'+(totalMoney/10000).toFixed(2)+'</em>万元</td></tr>';                if(loantype == 1){                    tableHtml+='<tr><th>公积金贷款利率</th><td>'+gjjRate+' %</td></tr>';                }else{                    tableHtml+='<tr><th>商业贷款利率</th><td>'+gjjRate+' %</td></tr>';                }                tableHtml+=' <tr><th>还款总额</th><td><em>'+(totalRepay/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>支付利息</th><td><em>'+(totalInterest/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>贷款月数</th><td><em>'+loanTime+'</em></td></tr>'                +' <tr><th>首月还款</th><td><em>'+firstRepay.toFixed(2)+'</em></td></tr>'                +' <tr><th>末月还款</th><td><em>'+lastRepay.toFixed(2)+'</em></td></tr>'                +' </tbody>'                +' </table>';            }else{//根据按揭比例                var downPayment = capitalPercent*totalCapital;//首付款                tableHtml = '<table>'                +' <thead><tr><td colspan="2">等额本息</td></tr></thead>'                +' <tbody>'                +' <tr><th>房款总额</th><td><em>'+totalCapital+'</em>万元</td></tr>'                +' <tr><th>首付款</th><td><em>'+downPayment.toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>贷款总额</th><td><em>'+(totalMoney/10000).toFixed(2)+'</em>万元</td></tr>';                if(loantype == 1){                    tableHtml+='<tr><th>公积金贷款利率</th><td>'+gjjRate+' %</td></tr>';                }else{                    tableHtml+='<tr><th>商业贷款利率</th><td>'+gjjRate+' %</td></tr>';                }                tableHtml+=' <tr><th>还款总额</th><td><em>'+(totalRepay/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>支付利息</th><td><em>'+(totalInterest/10000).toFixed(2)+'</em>万元</td></tr>'                +' <tr><th>贷款月数</th><td><em>'+loanTime+'</em></td></tr>'                +' <tr><th>首月还款</th><td><em>'+firstRepay.toFixed(2)+'</em></td></tr>'                +' <tr><th>末月还款</th><td><em>'+lastRepay.toFixed(2)+'</em></td></tr>'                +' </tbody>'                +' </table>';            }            $("#table-wrap").html('').html(tableHtml);        }else{//组合贷            var gjj_monthRate = gjjRate/100/12;//公积金月利率            var biz_monthRate = bizRate/100/12;//商业贷款月利率            var gjj_firstRepay ;//公积金首月还款            var gjj_lastRepay ;//公积金末月还款            var biz_firstRepay ;//商业贷款首月还款            var biz_lastRepay ;//商业贷款末月还款            var gjj_totalInterest;//公积金总利息            var biz_totalInterest;//商业贷款总利息            gjj_firstRepay  = (gjjCapital*10000/loanTime)+gjjCapital*10000*gjj_monthRate;            biz_firstRepay  = (bizCapital*10000/loanTime)+bizCapital*10000*biz_monthRate;            gjj_lastRepay = (gjjCapital*10000/loanTime)+(gjjCapital*10000-(parseInt(loanTime)-1)*(gjjCapital*10000/loanTime))*gjj_monthRate;            biz_lastRepay = (bizCapital*10000/loanTime)+(bizCapital*10000-(parseInt(loanTime)-1)*(bizCapital*10000/loanTime))*biz_monthRate;            gjj_totalInterest = ((parseInt(loanTime)+1)*gjjCapital*10000*gjj_monthRate)/2;            biz_totalInterest = ((parseInt(loanTime)+1)*bizCapital*10000*biz_monthRate)/2;            totalInterest = gjj_totalInterest + biz_totalInterest;            totalRepay = totalInterest + gjjCapital*10000 + bizCapital*10000;            firstRepay = gjj_firstRepay + biz_firstRepay;            lastRepay = gjj_lastRepay + biz_lastRepay;            tableHtml ='<table>'            +'<thead><tr><td colspan="2">等额本息</td></tr></thead>'            +'<tbody>'            +'<tr><th>贷款总额</th><td><em>'+(parseFloat(gjjCapital) + parseFloat(bizCapital))+'</em>万元</td></tr>'            +'<tr><th>公积金贷款利率</th><td>'+gjjRate+' %</td></tr>'            +'<tr><th>商业贷款利率</th><td>'+bizRate+' %</td></tr>'            +'<tr><th>还款总额</th><td><em>'+(totalRepay/10000).toFixed(2)+'</em>万元</td></tr>'            +'<tr><th>支付利息</th><td><em>'+(totalInterest/10000).toFixed(2)+'</em>万元</td></tr>'            +'<tr><th>贷款月数</th><td><em>'+loanTime+'</em></td></tr>'            +' <tr><th>首月还款</th><td><em>'+firstRepay.toFixed(2)+'</em></td></tr>'            +' <tr><th>末月还款</th><td><em>'+lastRepay.toFixed(2)+'</em></td></tr>'            +'</tbody>'            +'</table>';            $("#table-wrap").html('').html(tableHtml);        }    }});//公积金利率介绍$("#gjj-help").mouseover(function(){    var loantype = $("input[name='loantype']:checked").val();//贷款方式(1.公积金贷 2.商业贷款 3.组合贷)    if(loantype != 3){        $("#gjjRateIntroduction").css({display:"block"});    }else{        $("#gjjRateIntroduction").css({display:"block",top:"328px",left:"385.5px"});    }});$("#gjj-help").mouseout(function(){    $("#gjjRateIntroduction").css({display:"none"});});//商贷利率介绍$("#biz-help").mouseover(function(){    var loantype = $("input[name='loantype']:checked").val();//贷款方式(1.公积金贷 2.商业贷款 3.组合贷)    if(loantype != 3){        $("#gjjRateIntroduction").css({display:"block"});    }else{        $("#gjjRateIntroduction").css({display:"block",top:"283px",left:"400.5px"});    }});$("#biz-help").mouseout(function(){    $("#gjjRateIntroduction").css({display:"none"});});//还款方式介绍$("#repaytype-tips").mouseover(function(){    $("#repayTypeIntroduction").css({display:"block"});});$("#repaytype-tips").mouseout(function(){    $("#repayTypeIntroduction").css({display:"none"});});//计算结果介绍$("#result-help").mouseover(function(){    $("#resultIntroduction").css({display:"block"});});$("#result-help").mouseout(function(){    $("#resultIntroduction").css({display:"none"});});});function rateDisplay(){    $("#bizRate span:eq(2)").css({display:"none"});    $("#gjjRate span:eq(2)").css({display:"none"});    $("#bizRate span:eq(3)").css({display:"none"});    $("#gjjRate span:eq(3)").css({display:"none"});    $("#bizRate span:eq(4)").css({display:"none"});    $("#gjjRate span:eq(4)").css({display:"none"});}function initValidateValue(){    $("#validateTotalCapital").val('true');    $("#validateGjjCapital").val('true');    $("#validateBizCapital").val('true');    $("#validateGjjRate").val('true');    $("#validateBizRate").val('true');}




css样式代码:


@charset "utf-8";body,h1,h2,h3,h4,h5,h6,dl,dt,dd,ul,ol,li,th,td,p,form,button,input,textarea,fieldset,blockquote,img,iframe,pre,code,hr,legend{padding:0;margin:0}body{color:#333;font:12px Arial,Helvetica,sans-serif,Simsun}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ol,ul{list-style:none}img{border:0;vertical-align:top}input,select,input,textarea{font-size:12px;outline:0}select,input{vertical-align:middle}input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:0;padding:0;margin-bottom:}textarea{resize:none}fieldset{border:0}table{border-collapse:collapse;border-spacing:0}caption,th{text-align:left}address,cite,code,em,th,i,strong{font-style:normal;font-weight:normal}a{text-decoration:none;outline:0}a:hover{text-decoration:none}body{font-family:"Microsoft YaHei","微软雅黑","Hiragino Sans GB",tahoma,arial,simhei;color:#333}.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}.clearfix{*+height:1%}.triangle-down{width:0;height:0;overflow:hidden;display:inline-block;border-left:4px solid #fff;border-right:4px solid #fff;border-top:4px solid #999;border-bottom:4px solid #fff}.icon{display:inline-block;width:16px;height:16px;overflow:hidden;background-image:url(http://pages.ajkcdn.com/site/img/common/icons-2.0.png);background-repeat:no-repeat}.icon-people{background-position:0 0}.icon-love{background-position:0 -16px}.icon-close{background-position:0 -32px}.icon-search{background-position:0 -48px}.icon-arrdown{background-position:0 -64px}.icon-arrup{background-position:0 -80px}.icon-arrdown-org{background-position:-16px -64px}.icon-arrup-org{background-position:-16px -80px}.icon-arrowdown{background-position:0 -96px}.icon-arrowdown-org{background-position:-16px -96px}.icon-mark,.icon-salehouse,.icon-point,.icon-renthouse,.icon-house,.icon-house-hover,.icon-chat,.icon-chat-hover,.icon-suggest,.icon-suggest-hover,.icon-up,.icon-down,.icon-certificate,.icon-really,.icon-personal,.icon-free{width:32px;height:32px}.icon-mark{background-position:-32px 0}.icon-salehouse{background-position:-32px -32px}.icon-point{background-position:-32px -64px}.icon-renthouse{background-position:-32px -96px}.icon-house{background-position:-64px 0}.icon-house-hover{background-position:-96px 0}.icon-chat{background-position:-64px -32px}.icon-chat-hover{background-position:-96px -32px}.icon-suggest{background-position:-64px -64px}.icon-suggest-hover{background-position:-96px -64px}.icon-up{background-position:-64px -96px}.icon-down{background-position:-96px -96px}.icon-certificate{background-position:-64px -128px}.icon-really{background-position:-96px -128px}.icon-personal{background-position:-64px -160px}.icon-free{background-position:-96px -160px}.icon-starbroker,.icon-chattalent{width:70px;height:17px}.icon-starbroker{background-position:-132px -7px}.icon-chattalent{background-position:-132px -39px}.icon-personalhouse,.icon-realfree{width:114px;height:20px}.icon-personalhouse{background-position:100px 100px}.icon-realfree{background-position:100px 100px}.icon-recommend{width:38px;height:38px;background-position:-133px -128px}.icon-help{width:14px;height:14px;background-position:-16px -129px}.icon-wedge{width:107px;height:43px;background-position:-128px -176px}.icon-selup,.icon-seldown{width:14px;height:7px}.icon-selup{background-position:0 -192px}.icon-seldown{background-position:-16px -192px}.icon-user{width:32px;height:32px;background-position:-64px -192px}.icon-favorite{width:32px;height:32px;background-position:-64px -224px}.icon-apple{width:20px;height:20px;background-position:-96px -192px}.icon-android{width:20px;height:20px;background-position:-96px -224px}.icon-new{display:inline-block;width:27px;height:18px;background:url(http://pages.ajkcdn.com/site/img/global/2/icon_new.gif) no-repeat;position:absolute;top:2px;right:-4px}.cityselect{display:inline-block;position:relative;font-size:14px}.city-view{position:relative;display:inline-block;padding:0 15px 0 0;cursor:pointer}.city-view .triangle-down{margin-left:5px;border-top-color:#a7a7a7}.city-list{position:absolute;z-index:999;left:0;top:22px;font-size:12px;border:1px solid #d8d8d8;background:#f9f9f9;width:350px;padding:7px 0 0;border-radius:0 0 4px 4px}.city-list dl{margin:0 13px;padding:7px 0 6px;line-height:23px}.city-list dl~dl{border-top:1px solid #ccc}.city-list dt{float:left;width:72px;color:#666}.city-list dd{zoom:1;overflow:hidden;margin-left:72px}.city-list a{color:#1a519f;padding-right:11px;white-space:nowrap}.city-list dd a{float:left}.morecity{height:25px;text-align:right}.auto-grayback{background-color:#eee}.auto-ul{width:389px;background-color:#fff;border:1px solid #ccc;border-width:0 1px 1px 1px;border-radius:5px}.auto-ul li{position:relative;padding:0 10px;height:30px;line-height:30px}.auto-ul li b{font-weight:normal;position:absolute;right:5px;top:0}.auto-wrap{position:absolute;left:0;top:36px;width:100%;z-index:899;display:none}.icon-close{cursor:pointer}.search-map{width:70px;position:relative;display:inline-block;font-size:16px;color:#666;padding-top:6px;padding-left:30px;margin-left:8px;top:2px}.search-map:hover{text-decoration:underline}.search-map .icon-mark{position:absolute;left:0;top:0}.search-form{position:relative;z-index:899}.searchbar-rent{font-size:13px;height:17px;width:467px;padding:7px 0 7px 13px;border:1px solid #ccc;color:#999;border-radius:3px 0 0 3px}.search-form .icon-close{position:absolute;left:453px;top:11px}.searchbar-button{margin-left:-1px;width:120px;background:#f60;color:#fff;font-size:18px;border-radius:0 3px 3px 0;letter-spacing:4px;font-family:"Microsoft YaHei","微软雅黑",Tahoma,Arial,simhei,Helvetica,sans-serif;border:0;height:33px;cursor:pointer}.searchbar-button:hover{background:#cb4600}.search-ul{width:480px;background-color:#fff;border:1px solid #ccc;border-width:0 1px 1px 1px}.search-ul li{position:relative;padding:0 10px;height:30px;line-height:30px}.search-ul li b{font-weight:normal;position:absolute;right:5px;top:0;color:#999}.header-center{width:1180px;margin:0 auto;font-family:"Microsoft YaHei","微软雅黑","Hiragino Sans GB",tahoma,arial,simhei}.topbar{font-size:14px;height:44px;border-bottom:1px solid #ddd}.nav-site{float:left;padding-top:17px;line-height:14px}.nav-site li{float:left;padding:0 10px;border-left:1px solid #ddd}.nav-site li.first{padding-left:0;border-left:none}.user{float:right;text-align:right;padding-top:12px;margin-right:-10px}.userblock{display:inline-block;*display:inline;position:relative;height:16px;padding:2px 10px;font-size:13px;border-left:1px solid #ddd;zoom:1}.userblockfirst{border-left:none}.userblock .link{position:relative;display:inline-block;line-height:16px;margin-right:5px;*zoom:1;outline:0}.userblock .usermsg{padding-right:35px}.userblock .link .icon-point{position:absolute;right:0;top:-9px;text-align:center;line-height:32px;color:#fff;margin-top:0}.userblock span{display:inline-block;line-height:14px;margin-right:5px}.userblock ul{position:absolute;display:none;z-index:1000;right:-4px;top:33px;width:115px;border:1px solid #d6d6d6;background-color:#f7f7f7;border-radius:0 0 4px 4px;padding:10px;border-top:0;text-align:left}.userblock ul li{padding:5px 0 10px 8px}.userblock ul li.hr{height:0;border-top:1px solid #ddd;margin:3px 0 5px;padding:0}.userblock ul a{color:#666;margin:}.userblock ul a:hover{color:#f60}.userblock ul em{color:#f60;margin-left:5px}.userblock .triangle-down{margin:5px 0 0 5px}.userlogin .icon-people{vertical-align:top;margin:0 4px 0 0}.userfavorite .icon-love{vertical-align:top;margin:0 4px 0 0}.userfavorite .link{margin-right:0}.header{height:62px}.logo{display:block;overflow:hidden;float:left;margin:18px 15px 0 0;text-indent:-999em;width:85px;height:25px;background:url("http://pages.ajkcdn.com/site/img/global/2/logo.svg") 0 0 no-repeat;background:url("http://pages.ajkcdn.com/site/img/global/2/logox32.png") 0 0 no-repeat\0;*background:url("http://pages.ajkcdn.com/site/img/global/2/logox8.png") 0 0 no-repeat;background-size:85px 25px}.logo-site{float:left;margin-top:18px;border-left:1px solid #DDD;padding:0 10px 0 15px;color:#62ab00;font-size:24px;height:25px;line-height:25px}.logo-site:hover{color:#62ab00;text-decoration:none}.cityselect{float:left;margin:25px 0 0 10px}.nav li a.current,.nav li a:hover{}.search-form{float:right;margin-top:15px;_margin-top:-32px}.hot{z-index:1}.toTop{position:fixed;right:30px;bottom:100px;width:50px;color:#60ad00;z-index:999;_position:absolute;_top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-59))}.toTop a{display:block;position:relative;width:100%;text-align:center;color:#60ad00;margin:0 0 14px}.toTop a:hover{color:#039500}.toTop .iconfont{font-size:30px}.toTop span{display:block;width:100%}#to_top{color:#fff;height:50px;line-height:50px;background:#60ad00}#to_top .icon{margin-top:8px}#to_top:hover{color:#fff;background:#039500}.toTop .icon-point{position:absolute;display:none;text-align:center;line-height:32px;right:-5px;top:-8px;color:#fff}#research{position:absolute;top:-211px;right:-25px;width:80px;margin-bottom:50px;display:block;text-decoration:none;cursor:pointer}#research .research-header{width:84px;height:54px;background:transparent url("http://pages.ajkcdn.com/site/img/global/2/research_new.gif") no-repeat 0 0}#research .research-content{width:100%;background:transparent url("http://pages.ajkcdn.com/site/img/global/2/research_new.gif") repeat-y -84px 0;padding-bottom:5px;overflow:hidden}#research .research-content span{display:block;color:#8b4729;font-size:13px;text-align:center;font-weight:bold}#research .research-content p{color:#df7145;font-size:12px;padding:5px 10px 10px 10px}#research .research-content div{font-size:12px;color:#fff;padding:5px 0;background:#ff893b;border-radius:5px;margin:0 5px;text-align:center;width:70px;display:block;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}#research .research-footer{width:84px;height:8px;background:transparent url("http://pages.ajkcdn.com/site/img/global/2/research_new.gif") no-repeat 0 -60px}.erweima{width:0;opacity:0;height:0;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;position:absolute;left:0;top:0;background:transparent url("http://pages.ajkcdn.com/site/img/global/2/erWeiMa_New.png ") no-repeat 0 0;transition:width,height,left,top opacity;-moz-transition:width,height,left,top opacity;-webkit-transition:width,height,left,top opacity;-o-transition:width,height,left,top opacity;transition-duration:.3s;-webkit-transition-duration:.3s;-moz-transition-duration:.3s;-o-transition-duration:.3s}.downloadapp:hover .erweima{opacity:1;width:182px;height:190px;left:-190px;top:-150px}.downloadapp img{margin-bottom:5px}.footer{clear:both;border-top:1px #e0e0e0 solid;padding:0 0 30px}.footer .links{padding:16px 0 10px;text-align:center}.footer .links li{display:inline-block;*display:inline;border-left:1px solid #666;padding:0 10px;line-height:12px;height:14px}.footer a:hover{color:#333;text-decoration:underline}.footer .links li:first-child{border-left:none}.footer p{clear:both;text-align:center}.license{text-align:center;padding:25px 0 0}.license a{margin:0 10px}a.cnnic{position:relative;top:5px}.other-city{display:none;width:970px;margin:0 auto 10px;padding:5px 0;border:1px #e0e0e0 solid}.other-city li{float:left;width:86px;height:22px;overflow:hidden;line-height:22px;margin:0;padding:0 0 0 10px}.tab-link{display:none;width:970px;margin:0 auto 10px}.tab-link ul{padding:10px;float:left;border:1px #e0e0e0 solid}.tab-link li{display:inline-block;margin:0 2px}.community-link ul{margin-left:610px}.map-link ul{margin-left:320px}.house-link ul{margin-left:465px;width:345px}.house-link li{padding:0 10px 5px}.calculatorhead{height:40px;_height:40px;position:relative}.calculatorhead a{float:left;height:39px;color:#333;line-height:40px;font-size:16px;padding:0 16px;margin-right:12px;border-top-left-radius:4px;border-top-right-radius:4px;border:1px solid #ddd;border-bottom-style:none}.calculatorhead .highlight{height:40px;_height:41px;padding:0 17px;color:#fff;background-color:#61ab00;border-style:none}.calculatorhead .assess{position:absolute;width:118px;height:32px;line-height:32px;float:none;top:-5px;right:0;padding:0;margin:0;color:#333;font-size:14px;border-radius:3px;text-align:center;background-color:#fff8c7;border:1px solid #ffc152}.cal-bottom .com-sense .title{color:#333;font-weight:bold;font-size:22px;padding-left:21px;padding-bottom:14px}.cal-bottom .com-sense .tips-box{width:868px;height:168px;border-radius:5px;border:1px solid #d8d8d8}.cal-bottom .com-sense .tips-box ul{zoom:1;overflow:hidden;padding:13px 21px 13px 21px}.cal-bottom .com-sense .tips-box ul li{float:left;width:413px;height:29px}.cal-bottom .com-sense .tips-box ul li a{color:#003fd8;font-size:12px;line-height:29px}.cal-bottom .com-sense .tips-box ul li a:hover{color:#f60;text-decoration:underline}.cal-bottom .cal-introduce{color:#999;font-size:12px;padding:31px 0 0 0}.cal-bottom .cal-introduce a{color:#999;text-decoration:underline}.cal-bottom .cal-introduce a:hover{color:#f60;text-decoration:underline}.cal-bottom .hot-search{border-radius:5px;margin:17px 0 28px 0;padding:12px 0 14px 13px;border:1px solid #d8d8d8}.cal-bottom .hot-search dl{height:17px;font-size:12px}.cal-bottom .hot-search dl dt,.cal-bottom .hot-search dl dd{float:left;padding-right:30px}.cal-bottom .hot-search dl dt{color:#333;line-height:17px;padding-right:14px}.cal-bottom .hot-search dl dd a{color:#999;line-height:17px}.cal-bottom .hot-search dl dd a:hover{color:#f60;text-decoration:underline}.p_1180{margin:0 auto;width:1180px;padding-left:5px;margin-bottom:15px}.p_crumbs{height:20px;line-height:20px;color:#333;font-size:12px}.p_crumbs a:link,.p_crumbs a:visited{color:#0041d9;font-size:12px}.p_crumbs a:hover{color:#f60}.exia-box{cursor:pointer;position:relative;background-color:#fff;border:1px solid #e3e3e3}.exia-box .sol-label{height:100%}.exia-box .sol-label span{display:block;padding-left:13px;height:100%}.exia-box .sol-label i{line-height:0;display:inline-block;position:absolute;right:13px}.exia-box ul{display:none;margin:0;padding:0;left:-1px;z-index:99;list-style:none;position:absolute;max-height:320px;overflow-y:auto;background-color:#f9f9f9;border:1px solid #ccc}.exia-box ul li{cursor:pointer;padding-left:13px}.exia-box ul .li-over{background-color:#e4e4e4}.exia-box ul .li-static{background-color:#e4e4e4}.exia-light{border-color:#c9c9c9}.navhead{position:relative;z-index:9998;background:#62ab00;height:40px;width:100%;font-family:"Microsoft YaHei","微软雅黑","Hiragino Sans GB",tahoma,arial,simhei}.header-center{width:1180px;margin:0 auto}.navhead .logo{width:90px;height:30px;float:left;margin:4px 0 0;background:url(http://pages.ajkcdn.com/site/img/global/2/header/CommLogoV3.png) no-repeat}.cityselect{float:left;_width:70px;margin:15px 3px 0 1px;font-size:12px;color:#fff}.cityselect .triangle-down{border-color:#62ab00;border-top:4px solid #fff;position:relative;top:2px}.city-view{padding-right:0}.navigation{float:left}.navigation li{position:relative;width:auto;float:left;z-index:9999}.navigation li a{display:inline-block;height:40px;line-height:40px;padding:0 9px;color:#fff;font-size:16px}.navigation li.hover ul{display:block}.navigation li.current .nav-lv1,.navigation li.hover .nav-lv1,.navigation li .nav-lv1:hover{background:#528e01}.navigation ul{display:none;background:#f9f9f9;border:1px solid #d8d8d8;color:#666;padding:8px 0;position:absolute;left:0;top:40px;z-index:999;border-radius:0 0 4px 4px}.navigation ul li{float:none}.navigation ul li a{display:block;color:#666;padding:0 25px 0 20px;line-height:33px;height:33px;font-size:14px;white-space:nowrap}.navigation ul li a:hover{color:#528e01}.navigation ul li.hr{height:0;padding:0;margin:5px 10px;border-top:1px solid #ccc}.navigation ul li.nav-triangle{position:absolute;left:0;top:-12px;width:0;height:0;padding:0;margin:0;border:6px solid transparent;border-bottom:6px solid #d8d8d8}.navigation ul li.nav-triangle span{position:absolute;left:-6px;top:-4px;width:0;height:0;padding:0;margin:0;border:6px solid transparent;border-bottom:6px solid #f9f9f9}.nav-right{float:right;font-size:14px}.nav-right a{color:#fff}.userbox{float:left;position:relative;margin-right:10px;display:inline-block;height:40px;line-height:40px;width:100px;padding:0 10px 0 32px}.nav-right .hover{background:#528e01}.nav-right .hover ul{display:block}.userbox a{margin-left:2px}.userbox .icon-user{position:absolute;top:4px;left:0}.userbox .triangle-down{border:3px solid #62ab00;border-top:3px solid #fff;position:absolute;right:5px;top:18px}.userbox .triangle-up{border:3px solid #528e01;border-bottom:3px solid #fff;position:absolute;right:5px;top:18px}.userbox .icon-point{text-align:center;font-size:10px;line-height:32px;position:absolute;color:#fff;right:10px;top:4px}.userbox ul{display:none;position:absolute;z-index:999;left:0;top:40px;width:140px;border:1px solid #d8d8d8;background-color:#f9f9f9;border-radius:0 0 4px 4px;padding:8px 0}.userbox ul li{padding:0 0 0 28px}.userbox ul li.hr{margin:8px 20px;border-top:1px solid #CCC}.userbox ul a{font-size:12px;margin:0;display:block;width:100%;line-height:33px;height:33px;overflow:hidden;color:#666;cursor:pointer}.userbox ul a em{margin-left:5px;color:#f60}.userbox ul li a:hover{color:#528e01}.favorite{float:left;position:relative;width:100px;padding-left:32px;line-height:40px}.favorite .icon-favorite{position:absolute;left:0;top:4px}.nav-right .download-app{float:left;display:inline-block;position:relative;width:70px;padding-left:50px;height:27px;line-height:27px;border-radius:2px;margin-top:6px;background:#dce8cc;color:#666}.nav-right .download-app:hover{background:#f2f6e3}.download-app .icon-apple,.download-app .icon-android{position:absolute;top:3px}.download-app .icon-apple{left:5px}.download-app .icon-android{left:25px}.tooltip-wrap{border-radius:4px;border:1px solid #c9c9c9;padding:12px;position:relative;background:#fff}.tooltip-arrow{position:absolute;width:0;height:0;right:initial;left:19px}.tooltip-arrowbg{overflow:hidden;position:absolute;width:0;height:0}.tooltip-msg{*display:inline;overflow:hidden;line-height:20px;*zoom:1;color:#666}.arr-top{top:-11px;border-bottom:8px solid #c9c9c9;border-left:8px dashed transparent;border-right:8px dashed transparent}.arr-top .tooltip-arrowbg{top:2px;left:-7px;border-bottom:7px solid #fff;border-left:7px dashed transparent;border-right:7px dashed transparent}.arr-bottom{bottom:-11px;border-top:8px solid #c9c9c9;border-left:8px dashed transparent;border-right:8px dashed transparent}.arr-bottom .tooltip-arrowbg{bottom:2px;left:-7px;border-top:7px solid #fff;border-left:7px dashed transparent;border-right:7px dashed transparent}.arr-left{left:-9px;_left:-24px;border-right:8px solid #c9c9c9;border-top:8px dashed transparent;border-bottom:8px dashed transparent}.arr-left .tooltip-arrowbg{left:2px;top:-7px;border-right:7px solid #fff;border-top:7px dashed transparent;border-bottom:7px dashed transparent}.arr-right{left:-8px;border-right:8px solid #c9c9c9;border-top:8px dashed transparent;border-bottom:8px dashed transparent}.arr-right .tooltip-arrowbg{right:2px;top:-7px;border-left:7px solid #fff;border-top:7px dashed transparent;border-bottom:7px dashed transparent}.guesslike-title{font-size:22px;font-weight:bold;color:#333;margin:0 0 15px 26px}.guesslike-content{width:858px;border:1px solid #d8d8d8;border-radius:5px;padding:10px 0 10px 10px;height:250px;margin-bottom:20px}.guesslike-content li{float:left;width:180px;margin-right:13px;font-family:Simsun;cursor:pointer;padding:10px;_margin-right:7px}.guesslike-content li:hover{background:#f2f2f2}.guesslike-content li p{margin-top:8px}.guesslike-itemtitle{margin-top:8px;font-size:14px;width:185px;color:#1f52b2;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.guesslike-itemtitle:hover{color:#f60;text-decoration:underline}.guesslike-itemprice{color:#f60;font-size:14px;font-weight:bold}.guesslike-itemdetail{color:#666}.guesslike-itemcommunity{color:#454545}.w1180{width:1180px;margin:20px auto 0}.calcontent{margin-bottom:20px;width:1178px;background-color:#f9f9f9;border:1px solid #dcdcdc;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.calcontent .calleft{float:left;height:100%;width:587px;background-color:#fff;position:relative;border-right:1px solid #dcdcdc}.calcontent .calleft .item-top{margin-top:30px}.calcontent .calleft .pop{z-index:1}.calcontent .calleft .adTop{margin-top:8px}.calcontent .calleft .across{height:0;width:488px;margin:16px 0 25px 50px;_margin-top:0;border-bottom:1px dashed #d9d9d9}.calcontent .calleft .item-mod{color:#333;padding-left:142px;height:40px;font-size:14px;line-height:40px}.calcontent .calleft .item-mod .sl{float:left;padding-right:8px}.calcontent .icon-help{cursor:pointer;margin-right:10px;vertical-align:-2px;*vertical-align:middle;_margin-top:13px;_margin-bottom:13px}.calcontent .calleft .int-radio{width:12px;height:12px;margin-left:32px;margin-right:4px;_margin-top:14px;_margin-bottom:14px}.calcontent .calleft .r1{margin-left:0}.calcontent .calleft .item-mod .warn{display:none;color:#f00;font-size:14px;padding-left:12px}.calcontent .calleft .item-mod .item-label{float:left;width:112px;color:#666;height:40px;line-height:40px;font-size:14px;margin-left:-142px;text-align:right}.calcontent .calleft .item-mod .textbox{top:4px;height:32px;width:270px;float:left;position:relative}.calcontent .calleft .item-mod .textbox input{float:left;width:244px;height:30px;line-height:30px;color:#333;z-index:2;font-size:14px;padding:0 12px;border:1px solid #e3e3e3;background-color:transparent}.calcontent .calleft .item-mod .textbox em{_filter:alpha(opacity=0);position:absolute;display:block;top:0;right:11px;z-index:1;color:#999;width:48px;height:32px;line-height:32px;font-size:14px;text-align:right}.calcontent .calleft .item-mod .short{width:90px}.calcontent .calleft .item-mod .short input{width:64px;z-index:1}.calcontent .calleft .item-mod .mid{width:163px}.calcontent .calleft .item-mod .mid input{width:137px}.calcontent .calleft .item-mod .selectbox{position:relative;z-index:1;margin-top:4px;float:left;width:270px;height:32px;line-height:32px;font-size:14px;color:#333}.calcontent .calleft .item-mod .sel-time{width:90px}.calcontent .calleft .item-mod .selectbox select{display:none}.calcontent .calleft .item-mod .sin-text{float:left;padding:0 9px 0 7px}.calcontent .calleft .item-mod .cr{padding-right:0}.calcontent .calleft .item-bot{margin-top:41px;padding-left:142px}.calcontent .calleft .item-bot .cal-button{display:inline-block;font-size:16px;color:#fff;width:150px;height:40px;line-height:40px;text-align:center;background-color:#f60;border-radius:3px}.calcontent .calleft .item-bot .cal-reset{color:#333;font-size:14px;margin-left:16px}.calcontent .calleft .icon-tricut{position:absolute;top:50%;right:-14px;margin-top:-15px}.calcontent .calright{width:470px;height:100%;float:left;padding-left:61px;position:relative}.calcontent .calright .default{margin:120px auto;width:178px;height:211px}.calcontent .calright .default i{width:178px;height:178px;display:inline-block;background-image:url(http://pages.ajkcdn.com/site/img/calculator/calculator-bg.png)}.calcontent .calright .default p{color:#999;font-size:14px;text-align:center;padding:14px 0 0 10px}.calcontent .calright .resultContent{width:466px;margin:30px auto}.calcontent .calright .resultContent table{width:466px;font-size:14px;background:#fff;margin-bottom:16px;border-collapse:collapse}.calcontent .calright .resultContent table thead{color:#666}.calcontent .calright .resultContent table tbody{color:#333}.calcontent .calright .resultContent table th,.calcontent .calright .resultContent table td{border:1px solid #dcdcdc;text-align:center;font-weight:normal;height:43px;line-height:43px;background:#fff}.calcontent .calright .resultContent table th{width:107px;background-color:#f8f8f8}.calcontent .calright .resultContent table th .icon-wedge{zoom:1;_display:block}.calcontent .calright .resultContent table tbody td{font-size:16px}.calcontent .calright .resultContent .doublec tbody td{width:178px}.calcontent .calright .resultContent table tbody td em{color:#f60;padding-right:4px}.calcontent .calright .resultContent .result-tip{color:#999;font-size:13px;_margin-top:-14px}.calcontent .calright .resultContent .result-link{color:#06c;display:block;font-size:14px;margin-top:16px;_margin-top:2px}.calcontent .calright .resultContent .result-link em{color:#f60}.icon-arrow{display:block;position:absolute;width:0;height:0;right:-15px;_right:-17px;top:50%;margin-top:-14px;border-left:15px solid #c9c9c9;border-top:15px dashed transparent;border-bottom:15px dashed transparent}.icon-arrow span{display:block;overflow:hidden;position:absolute;height:0;width:0;left:-16px;top:-15px;border-left:15px solid #fff;border-top:15px dashed transparent;border-bottom:15px dashed transparent}.advBox{width:236px;height:236px;border-radius:5px;padding:33px 0 0 33px;border:1px solid #d8d8d8;background:#fff;overflow:hidden}.advWrap .advBox{float:right}.advWrap .guesslike-content{float:left}.p_crumbs a:link,.p_crumbs a:visited{color:#666}.p_crumbs a:hover{color:#f60;text-decoration:underline}.pre-detail{float:left;margin-right:9px}.calcontent .calright .default{margin-top:165px}



0 0
原创粉丝点击