jQuery网页贷款计算器表单代码



273 1091 364



特效描述:贷款计算器表单 表单代码,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

加群请备注:从官网了解到