基于html5开发的房贷计算器.zip

# 基于JavaScript开发的房贷计算器 房贷计算器可以帮助估算每月的还款金额以及其他与按揭相关的财务费用。它还提供了几个选项，可以将额外的付款或者常见的抵押贷款相关费用的年增长率考虑在内。 ## 预览地址 https://fangdaijisuanqi.vip ## 关键源码 ``` <div class="container"> <div class="calculator"> <div view="calc_input" style="display:block;"> <div class="ui-bar" skin="title"> <at class="title"> 房贷计算器 </at> </div> <nav class="switch-tabs big-switch-tabs"> <ul style="cursor: pointer;"> <li id="business_calc" class="tab select-tab"> <div>商业贷款</div> </li> <li id="PAF_calc" class="tab normal-tab"> <div>公积金贷款</div> </li> <li id="mix_calc" class="tab normal-tab"> <div>组合贷款</div> </li> </ul> </nav> <div class="input-fields" wrap="h10"> <ul> <li id="business_sum_line" class="field-wrap"> <label>商业贷款</label> <div class="field"> <div class="ui-text" data-tail="万元"> <input type="number" id="business_sum" value="100"> </div> </div> </li> <li id="PAF_sum_line" class="field-wrap" style="display:none"> <label>公积金贷款</label> <div class="field"> <div class="ui-text" data-tail="万元"> <input type="number" id="PAF_sum" value="80"> </div> </div> </li> <li class="field-wrap"> <label>贷款期限</label> <div class="field"> <div class="ui-select"> <div class="value-bar"> <span id="loan_period_select_bar" class="text" value="20">20年（240期）</span> <span class="icon-sps tail-icon"></span> </div> <select id="loan_period_select"> <option value="0">半年（6期）</option> <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 value="20" selected="selected">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> </div> </div> </li> <li id="business_rate_select_line" class="field-wrap"> <label>商贷利率</label> <div class="field long-field" id="business_rate_select_field"> <div class="ui-select"> <div class="value-bar"> <span id="business_rate_select_bar" class="text" value="12">最新基准利率</span> <span class="icon-sps tail-icon"></span> </div> <select id="business_rate_select" input-method="auto"> <option value="-1">手动输入</option> <option value="12" data-key="18-1-1" selected="selected">最新基准利率</option> </select> </div> </div> <div class="field short-field" id="business_discount_field"> <div class="ui-select"> <div class="value-bar"> <span id="business_discount_bar" class="text" data-discount="1.0">无折扣</span> <span class="icon-sps tail-icon"></span> </div> <select id="business_discount"> <option value="0" data-discount="1.0" selected="selected">无折扣</option> <option value="10" data-discount="1.2">1.2倍</option> <option value="9" data-discount="1.15">1.15倍</option> <option value="8" data-discount="1.1">1.1倍</option> <option value="7" data-discount="1.05">1.05倍</option> <option value="6" data-discount="0.95">95折</option> <option value="5" data-discount="0.9">9折</option> <option value="4" data-discount="0.85">85折</option> <option value="3" data-discount="0.8">8折</opti