jQuery網頁貸款計算器表單代碼



279 1115 372



特效描述:貸款計算器表單 表單代碼,jQuery貸款計算器

代碼結構

1. 引入CSS

<link rel="stylesheet" href="css/index.css">

2. 引入JS

<script src="js/jquery-2.2.0.min.js"></script>
<script src="js/index.min.js"></script>

3. HTML代碼

<div id="box">
    <h2>貸款計算器作業</h2>
    <div id="tabs">
        <ul class="title">
            <li><a href="#" data-cid="contact" class="current">貸款計算器</a></li>
            <li><a href="#" data-cid="project">公積金貸款計算器</a></li>
            <li><a href="#" data-cid="submit">攢錢貸款計算器</a></li>
            <li><a href="#" data-cid="money">稅費計算器</a></li>
            <li><a href="#" data-cid="fish">裝修貸款計算器</a></li>
            <li><a href="#" data-cid="buy">購房能力評估計算器</a></li>
        </ul>
        <div id="content">
            <div id="contact">
                <form id="myform" action="#" style="display: block">
                    <div id="contact_left">
                        <div id="dklx">
                            <h5>請您填寫1:</h5>
                            貸款類別:
                            <label><input type="radio" name="dktype" checked value="0"/>商業貸款</label>
                            <label><input type="radio" name="dktype" value="1"/>公積金貸款</label>
                            <label><input type="radio" name="dktype" value="2"/>組合型貸款</label>
                        </div>
                        <div id="jsfs">
                            <h6>計算方式:</h6>
                            <dl id="way">
                                <dt><label class="count"><input type="radio" name="jsfs" value="0"
                                                                checked/>根據面積、單價計算</label></dt>
                                <dd style="display: block">
                                    <label>單價:</label><input type="text" name="price">元/平米<br>
                                    <label>面積:</label><input type="text" name="area">平方米<br>
                                    <label>按揭成數</label>
                                    <select class="form-control" name="ajcs">
                                        <option value="70" selected>7成</option>
                                        <option value="80">8成</option>
                                        <option value="90">9成</option>
                                    </select>
                                </dd>
                                <dt><label><input type="radio" value="1" name="jsfs"/>根據貸款總額計算</label></dt>
                                <dd>
                                    <label>貸款總額:<input type="text" name="dkze">元</label>
                                </dd>
                            </dl>
                            <label>按揭年數</label>
                            <select class="form-control" name="ajns">
                                <option value="120" selected>10年(120期)</option>
                                <option value="240">20年(240期)</option>
                                <option value="360">30年(360期)</option>
                            </select><br>
                        </div>
                        <div id="dkll">
                            <label>貸款利率</label>
                            <select name="dkll">
                                <option value="0">12年6月8日基準利率</option>
                                <option value="1">12年7月6日基準利率</option>
                                <option value="2">14年11月22日基準利率</option>
                                <option value="3" selected>15年03月01日基準利率</option>
                            </select><br>
                            <input class="percent" name="dkll" type="text" value="6.80"/>%
                        </div>
                        <div id="method">
                            還款方式:
                            <label><input type="radio" name="bb" checked/>等額本息</label>
                            <label><input type="radio" name="bb"/>等額本金<br></label>
                        </div>
                        <input type="button" name="startCalc" class="start" value="開始計算"/>
                        <input type="reset" class="again" value="重新填寫"/>
                    </div>
                    <div id="contact_right">
                        <h5>查看結果:</h5>
                        <label>房款總額:</label><input type="text" name="fousex" readonly/>元<br>
                        <label>貸款總額:</label><input type="text" name="loan" readonly/>元<br>
                        <label>還款總額:</label><input type="text" name="refund" readonly/>元<br>
                        <label>支付利息款:</label><input type="text" name="pay" readonly/>元<br>
                        <label>首期付款:</label><input type="text" name="first" readonly/>元<br>
                        <label>貸款月數:</label><input type="text" name="month" readonly/><br>
                        <label>月均還款:</label><input type="text" name="average" readonly/>元<br>
                        <p>*以上結果僅供參考</p>
                        <img src="images/pic_03.jpg">
                    </div>
                </form>
            </div>
            <div class="box">公積金貸款></div>
            <div class="box">提前還貸</div>
            <div class="box">稅費></div>
            <div class="box">裝修貸款</div>
            <div class="box">購房能力評估</div>
        </div>
    </div>
</div>
<div id="list">
    <h2>貸款利率表</h2>
    <table>
        <thead>
        <tr>
            <th colspan="3">房貸利率</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th colspan="3">公積金利率(單位%)</th>
        </tr>
        <tr>
            <td>年限</td>
            <td>1-5年</td>
            <td>5-30年</td>
        </tr>
        <tr>
            <td>12年6月8日</td>
            <td>4.20</td>
            <td>4.70</td>
        </tr>
        <tr>
            <td>12年7月6日</td>
            <td>4.00</td>
            <td>4.50</td>
        </tr>
        <tr>
            <td>14年11月22日</td>
            <td>3.75</td>
            <td>4.25</td>
        </tr>
        <tr>
            <td>15年3月1日</td>
            <td>3.50</td>
            <td>4.00</td>
        </tr>
        <tr>
            <td>15年5月11日</td>
            <td>3.25</td>
            <td>3.75</td>
        </tr>
        <tr>
            <th colspan="3">商業貸款利率(單位%)</th>
        </tr>
        <tr>
            <td>年限</td>
            <td>3-5年</td>
            <td>5-30年</td>
        </tr>
        <tr>
            <td>12年6月8日</td>
            <td>6.65</td>
            <td>6.80</td>
        </tr>
        <tr>
            <td>12年7月6日</td>
            <td>6.40</td>
            <td>6.55</td>
        </tr>
        <tr>
            <td>14年11月22日</td>
            <td>6.00</td>
            <td>6.15</td>
        </tr>
        <tr>
            <td>15年3月1日</td>
            <td>5.75</td>
            <td>5.90</td>
        </tr>
        </tbody>
    </table>
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: 滾動切換 滾動條切換 滑動選項卡 滑動切換 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 滑動手風琴 切換按鈕 表單 表單美化 表單插件 表單美化插件 導航切換 菜單切換 文本框 text文本框 搜索框
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子