jQueryEasyUI實現(xiàn)房貸計算器詳細教程3--EasyUI部分

1.從載入EasyUI開始

讀者需要到EasyUI官網(wǎng)中下載包含原文件和demo的壓縮包破讨，并解壓到之前編寫的代碼目錄下即可喳整，文件路徑請參考下方源代碼蜀漆。參考鏈接：Download jQuery EasyUI 1.5.2,下載其中的Freeware Edition慎皱。

這部分教程的內(nèi)容集中在如何用EasyUI編寫房貸計算器老虫。如果讀者學(xué)習(xí)并實現(xiàn)過前兩部分HTML和jQuery的教程，那么學(xué)習(xí)這一部分的難度會大大降低茫多，只需要關(guān)注純粹的EasyUI內(nèi)容即可祈匙；如果讀者沒有學(xué)習(xí)過前兩部分內(nèi)容，也可以直接學(xué)習(xí)這一部分內(nèi)容地梨，對房貸計算器內(nèi)容和交互部分菊卷，可以先運行最后給出的完整代碼來理解。

源代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>房貸計算器</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/color.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
</head>
<body>
    <h2>房貸計算器</h2>
    <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="fd_easyui.js"></script>
</body>
</html>

先修知識：
1.<link> 標(biāo)簽最常見的用途是鏈接樣式表,源代碼中鏈接了常用的4個EasyUI樣式宝剖，參考鏈接：HTML <link> 標(biāo)簽洁闰。
2.讀者需要對CSS樣式有簡單的了解龟劲，只需要知道CSS 可以改變HTML外觀即可叮趴，
參考鏈接：CSS 簡介。

代碼中鏈接了4個常用EasyUI樣式和3個JavaScript文件基公，并將自己編寫的JavaScript代碼放在相同目錄的fd_easyui.js 文件中。

2.如何學(xué)習(xí)EasyUI

讀者可以按照以下5個步驟腰素，學(xué)習(xí)和使用EasyUI:

了解EasyUI有哪些插件聘裁，以及這些插件的效果，選擇合適的插件來實現(xiàn)想要的功能弓千，參考鏈接：EasyUI Demo 在線實例衡便。
了解插件的屬性，思考自己會用到哪些屬性洋访，以及如何編寫這些屬性镣陕。
了解插件的事件，思考自己會用到哪些事件姻政，以及如何編寫這些事件呆抑。
了解插件的方法，思考自己會用到哪些方法汁展，以及如何編寫這些方法鹊碍。
參考EasyUI插件文檔中對于插件屬性、事件和方法的詳細說明食绿，運行我們下載并解壓的官方文檔jquery-easyui-1.5.2\demo目錄下的demo侈咕，每一個插件都有幾個參考樣例，其中basic.html演示了插件基本功能炫欺，其余樣例演示了設(shè)置不同的屬性乎完、事件和方法后，插件的效果有何變化品洛。

3.頁面布局

功能：
把所有的輸入輸出文本框都顯示在一列树姨，顯得過于冗長，我們需要把用戶輸入的房貸信息和房貸詳情的計算結(jié)果分成兩列顯示桥状。使用EasyUI的Layout插件可以實現(xiàn)頁面布局功能帽揪，布局（layout）是有五個區(qū)域（北區(qū) north、南區(qū) south辅斟、東區(qū) east转晰、西區(qū) west 和中區(qū) center）的容器。中間的區(qū)域面板是必需的士飒，邊緣區(qū)域面板是可選的查邢。每個邊緣區(qū)域面板可通過拖拽邊框調(diào)整尺寸，也可以通過點擊折疊觸發(fā)器來折疊面板酵幕。我們將用戶的輸入信息放在扰藕，中區(qū)，將計算結(jié)果信息放在東區(qū)芳撒。

效果截圖：

源代碼：

    <div class="easyui-layout" style="width:801px;height:570px;">
        <div data-options="region:'center',title:'房貸詳情'"  style="padding:10px;"  >
        
        </div>
        
        <div data-options="region:'east',title:'計算結(jié)果',collapsible:false" style="width:400px;">
            
        </div>
    </div>

先修知識：

在HTML標(biāo)簽中加入class="easyui-layout"邓深，表示這是一個EasyUI插件未桥。
教程中用使用style設(shè)置標(biāo)簽的寬（width）、高（height）芥备、內(nèi)邊距（padding）和外邊距（margin）冬耿，這些數(shù)值都是調(diào)整好之后的，讀者可以先不設(shè)置這些值萌壳，把整個頁面編寫完之后亦镶，再自行調(diào)整，參考鏈接：HTML style 屬性袱瓮，CSS width 屬性染乌，CSS height 屬性，CSS padding 屬性懂讯，CSS margin 屬性。
簡單了解Layout插件的效果和功能台颠，參考鏈接：EasyUI Layout 布局,參考demo：jquery-easyui-1.5.2\demo\layout\basic.html褐望。
EasyUI插件的屬性，可以在標(biāo)簽中用data-options屬性來設(shè)置串前，例如：data-options="region:'center',title:'房貸詳情'"瘫里。
Layout插件的region屬性定義布局面板（layout panel）的位置，其值是下列之一：north荡碾、south谨读、east、west坛吁、center劳殖；title屬性表示布局面板（layout panel）的標(biāo)題文本；collapsible屬性定義是否顯示可折疊按鈕拨脉。參考鏈接：EasyUI Layout 布局,參考demo：jquery-easyui-1.5.2\demo\layout\nocollapsible.html哆姻。

4.選擇貸款類別

我們將用戶選擇貸款類型和自動修改貸款利率這兩個緊密關(guān)聯(lián)的功能，放在一個小面板中玫膀。

效果截圖：

源代碼：

HTML源代碼：

         <div style="width:380px;height:100px;  margin-bottom: 10px ">
                <div class="easyui-panel" title="貸款類別" style="width:380px;height:100px; padding:10px; " >

                    <div>
                        <input id="cc" style="width:250px;">
                    </div>
                    <div id="sp">
                        <div style="line-height:22px;background:#fafafa;padding:5px;">請選擇貸款類別</div>
                        <div style="padding:10px">
                            <input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked ="checked" ><span>公積金貸款</span><br/>
                            <input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan"><span>商業(yè)貸款</span>
                        </div>
                    </div>

                    <div>
                        <input  id="id_dai_kuan_li_lv" class="easyui-textbox" type="text" name="dai_kuan_li_lv" value="3.25" label="貸款利率:" labelPosition="left" style="width:250px;"> %

                    </div>
                </div>
            </div>

JavaScript源代碼：

$('#cc').combo({
        editable:false,
        label:'選擇貸款類型:',
        labelPosition:'left'
    });
    
    $('#sp').appendTo($('#cc').combo('panel'));
            
    $('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
            
    $('#sp input').click(function(){
        var v = $(this).val();
        var s = $(this).next('span').text();
        $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
    });
    
    $("#sp input").change(function () {
        if ( $("input:radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
        {
            $("#id_dai_kuan_li_lv").textbox('setValue',"4.90");
        } else
        {
            $("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
        }
    });

先修知識：

EasyUI的面板用Panel插件實現(xiàn)矛缨，參考鏈接：EasyUI Panel 面板,參考demo：jquery-easyui-1.5.2/demo/panel/basic.html。
EasyUI中沒有與radio樣式直接對應(yīng)的插件帖旨，我們使用功能類似的Combo組合代替箕昭。參考demo：jquery-easyui-1.5.2/demo/combo/basic.html中用Combo插件實現(xiàn)了radio單選按鈕的功能，我們只需要在這個demo上稍作修改解阅，就可以實現(xiàn)我們需要的功能落竹。需要注意的是組合（combo）可以使用 javascript 從 <select> 或 <input> 元素進行創(chuàng)建。請注意瓮钥，從標(biāo)記創(chuàng)建組合（combo）是無效的筋量，參考鏈接：EasyUI Combo 組合烹吵。
用JavaScript設(shè)置EasyUI插件的屬性的流程如下，以combo為例：

$('#cc').combo({
     editable:false,
     label:'選擇貸款類型:',
     labelPosition:'left'
 });

首先只能使用jQuery的id選擇器來選擇元素桨武，然后說明插件的類型（本例中是combo）肋拔，然后在大括號中設(shè)置屬性的值。

combo插件的editable屬性定義用戶是否可以往文本域中直接輸入文字呀酸。EasyUI插件可以使用label和labelPosition屬性定義標(biāo)記和標(biāo)記的位置凉蜂，功能與HTML的label標(biāo)簽相同，參考鏈接：EasyUI Combo 組合性誉，HTML <label> 標(biāo)簽窿吩。
通過 jQuery，可以把動作/方法鏈接起來错览。即允許我們在一條語句中允許多個 jQuery 方法（在相同的元素上）纫雁。語句$('#sp').appendTo($('#cc').combo('panel'));就是在同一個元素上運行了兩個方法，參考鏈接：jQuery - Chaining倾哺。
jQuery的appendTo() 方法在被選元素的結(jié)尾（仍然在內(nèi)部）插入指定內(nèi)容轧邪，參考鏈接：appendTo() 方法。
用JavaScript調(diào)用EasyUI插件的方法的流程如下羞海，以combo為例：
無參數(shù)：

$('#cc').combo('panel');

有參數(shù)：

$('#cc').combo('setValue', "gong_ji_jin_dai_kuan");

其中combo代表插件名稱忌愚， 'setValue'和'panel'代表插件插件的方法名， "gong_ji_jin_dai_kuan"是傳入?yún)?shù)的值却邓。

combo插件的panel方法用來返回下拉面板對象硕糊，setValue 方法用來設(shè)置組件的值，setText 方法用來設(shè)置文本值腊徙，hidePanel 方法用來隱藏下拉面板简十，參考鏈接：EasyUI Combo 組合。
jQuery可以通過this關(guān)鍵字選擇被選中的元素昧穿，參考鏈接：jQuery 核心 - jQuery() 方法中的用法 2 ：使用 DOM 元素部分勺远。
<span> 標(biāo)簽被用來組合文檔中的行內(nèi)元素，參考鏈接：HTML <span> 標(biāo)簽时鸵。
jQuery的text() 方法用來設(shè)置或返回被選元素的文本內(nèi)容胶逢，參考鏈接：jQuery 文檔操作 - text() 方法。
EasyUI的textbox插件用來實現(xiàn)文本框饰潜。textbox的setValue方法用來設(shè)置文本框的值初坠；textbox的getValue方法用來設(shè)置文本框的值。參考鏈接：TextBox彭雾，參考demo：jquery-easyui-1.5.2/demo/textbox/basic.html碟刺。

5.選擇計算方式

采用EasyUI標(biāo)簽頁插件實現(xiàn)用戶選擇計算方式的功能，取代之前使用單選按鈕加隱藏輸入框的方式薯酝。采用EasyUI組合框插件實現(xiàn)用戶選擇首付比例的功能半沽，取代之前使用的下拉列表爽柒。

效果截圖：

源代碼：

        <div style="width:380px;height:130px;  margin-bottom: 10px ">
                <div id="id_ji_suan_fang_shi" class="easyui-tabs" style="width:380px;height:130px">
                    <div title="根據(jù)面積、單價者填、首付比例計算" style="padding:10px">
                        <div>
                            <input  id="id_dan_jia" class="easyui-textbox" type="text" name="dan_jia" label="單價:" labelPosition="left" style="width:250px;"> 元/平方米
                        </div>

                        <div>
                            <input  id="id_mian_ji" class="easyui-textbox" type="text" name="mian_ji" label="面積:" labelPosition="left" style="width:250px;"> 平方米
                        </div>

                        <div >
                            <select id ="id_shou_fu_bi_li" class="easyui-combobox" name="shou_fu_bi_li" label="首付比例:" labelPosition="left" style="width:250px;">
                                <option value="0">無</option>
                                <option value="0.1">1成</option>
                                <option value="0.2">2成</option>
                                <option value="0.3" selected = "selected">3成</option>
                                <option value="0.4">4成</option>
                                <option value="0.5">5成</option>
                                <option value="0.6">6成</option>
                                <option value="0.7">7成</option>
                                <option value="0.8">8成</option>
                                <option value="0.9">9成</option>
                            </select>
                        </div>
                    </div>
                    
                    <div title="根據(jù)貸款總額計算" style="padding:10px">
                        <div>
                            <input  id="id_dai_kuan_zong_e" class="easyui-textbox" type="text" name="dai_kuan_zong_e" label="貸款總額:" labelPosition="left" style="width:250px;"> 元
                        </div>
                    </div>
                </div>
            </div>

先修知識：
1.EasyUI用tabs創(chuàng)建選項卡插件浩村，參考鏈接：EasyUI Tabs 標(biāo)簽頁/選項卡，參考demo：jquery-easyui-1.5.2/demo/tabs/basic.html占哟。
2.EasyUI用combobox創(chuàng)建組合框心墅，參考鏈接：EasyUI Combobox 組合框，參考demo：jquery-easyui-1.5.2/demo/combobox/basic.html榨乎。

6.選擇貸款年數(shù)

采用EasyUI組合框插件實現(xiàn)用戶選擇貸款年數(shù)的功能怎燥，取代之前使用的下拉列表，并將這個組合框放在單獨的一個面板中蜜暑。

效果截圖：

源代碼：

       <div style="width:380px;height:100px;  margin-bottom: 10px ">
                <div  class="easyui-panel" title="貸款年數(shù)" style="width:380px;height:100px; padding:10px;">
                    <div >
                        <select id="id_dai_kuan_nian_shu" class="easyui-combobox" name="dai_kuan_nian_shu" style="width:250px;" label="選擇貸款年數(shù):" labelPosition="left">
                            <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">20年(240期)</option>
                            <option value="252">21年(252期)</option>
                            <option value="264">22年(264期)</option>
                            <option value="276">23年(276期)</option>
                            <option value="288">24年(288期)</option>
                            <option value="300">25年(300期)</option>
                            <option value="312">26年(312期)</option>
                            <option value="324">27年(324期)</option>
                            <option value="336">28年(336期)</option>
                            <option value="348">29年(348期)</option>
                            <option value="360" selected = "selected" >30年(360期)</option>
                        </select>
                    </div>

                </div>
            </div>

7.顯示計算結(jié)果

在布局的東區(qū)顯示計算結(jié)果铐姚。

效果截圖：

源代碼：

   <div style="width:370px;height:500px;  margin-bottom: 10px ;padding:10px">
                <div>
                    <input  id="id_jie_guo_fang_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guofang_kuan_zong_e" label="房款總額:" labelPosition="left" style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_shou_fu_shu_e" class="easyui-textbox" type="text" name="jie_guo_shou_fu_shu_e" label="首付數(shù)額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_dai_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_zong_e" label="貸款總額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_huan_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_huan_kuan_zong_e" label="還款總額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_li_xi_zong_e" class="easyui-textbox" type="text" name="jie_guo_li_xi_zong_e" label="利息總額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_dai_kuan_yue_shu" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_yue_shu" label="貸款月數(shù):" labelPosition="left"style="width:250px;"> 元
                </div>
                <div id="id_div_jie_guo_mei_yue_huan_kuan">
                    <input  id="id_jie_guo_mei_yue_huan_kuan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan" label="每月還款:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
                    <input  id="id_jie_guo_mei_yue_huan_kuan_qing_dan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan_qing_dan" label="每月還款:" labelPosition="left" multiline="true" style="width:250px;height:200px"> 
                </div>
            </div>
        </div>

先修知識：
1.EasyUI中將textbox插件的multiline屬性設(shè)置為true即可實現(xiàn)多行文本框，參考鏈接：Multiline TextBox肛捍，參考demo：jquery-easyui-1.5.2/demo/textbox/multiline.html谦屑。

8.實現(xiàn)選擇還款方式

采用EasyUI的combo插件實現(xiàn)選擇還款方式的功能，取代之前的單選按鈕篇梭。用戶選擇單選按鈕的同時，顯示對應(yīng)的每月還款單行文本框或多行文本框酝枢。

效果截圖：

源代碼：

HTML源代碼：

            <div style="width:380px;height:80px;  margin-bottom: 10px ">
                <div class="easyui-panel" title="還款方式" style="width:380px;height:80px; padding:10px;">

                    <div>
                        <input id="cc2" style="width:250px;">
                    </div>
                    <div id="sp2">
                        <div style="line-height:22px;background:#fafafa;padding:5px;">請選擇還款方式</div>
                        <div style="padding:10px">
                            <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked ="checked" ><span>等額本息</span><br/>
                            <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin"><span>等額本金</span>
                        </div>
                    </div>

                </div>
            </div>

JavaScript源代碼：

    $('#cc2').combo({
        required:true,
        editable:false,
        label:'選擇還款方式:',
        labelPosition:'left'
    });
    
    $('#sp2').appendTo($('#cc2').combo('panel'));
  
    $('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
            
    $('#sp2 input').click(function(){
        var v = $(this).val();
        var s = $(this).next('span').text();
        $('#cc2').combo('setValue', v).combo('setText', s).combo('hidePanel');
    });
    
    $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
                
    $("input:radio[name=huan_kuan_fang_shi]").change(function () {
        if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi")
        {
            $("#id_div_jie_guo_mei_yue_huan_kuan").show();
            $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
        } else
        {
            $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").show();
            $("#id_div_jie_guo_mei_yue_huan_kuan").hide();
        }
    });

9.計算恬偷、重置按鈕

采用EasyUI的Linkbutton插件實現(xiàn)按鈕功能，并添加按鈕顏色帘睦，取代之前的button按鈕袍患。用戶點擊計算按鈕時，顯示計算結(jié)果竣付；用戶點擊重置按鈕時诡延，將頁面上所有插件的值設(shè)置為初始值。

效果截圖：

源代碼：

HTML源代碼：

            <div style="width:280px;height:30px;  margin-bottom: 10px ; padding-left: 100px ">
                <a href="#" id = "ji_suan" class="easyui-linkbutton c6" style="width:80px" >計算</a>
                <a href="#" id = "chong_zhi" class="easyui-linkbutton c2" style="width:80px">重置</a>
            </div>

JavaScript源代碼：

 $('#ji_suan').linkbutton({
        onClick:function(){
            if( $('#id_ji_suan_fang_shi').tabs('getTabIndex', $('#id_ji_suan_fang_shi').tabs('getSelected'))== 0)
            {
                if ( $("#id_dan_jia").textbox('getValue') == 0)
                {
                    alert("請?zhí)顚憜蝺r");
                }
                if ($("#id_mian_ji").textbox('getValue') == 0)
                {
                    alert("請?zhí)顚懨娣e");
                }
                if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
                {
                    var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue'); 
                    var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
                    var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
                    var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                    var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / (  Math.pow( (li_lv+1), yue_shu ) - 1 );

                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',fang_kuan_zong_e); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li);
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e);
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2));
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2));
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu);
                    $("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
                }else
                {
                    var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue');
                    var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
                    var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
                    var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                            
                    var yi_huan_jin_e = 0;
                    var mei_yue_huan_kuan_qing_dan ="";
                    var huan_kuan_zong_e = 0;
                    for (var i = 1; i <= yue_shu; i++)
                    {
                        var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
                        mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
                        yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
                        huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
                    }
                
                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue', fang_kuan_zong_e ); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li );
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e ); 
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2)  );
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue',(huan_kuan_zong_e - zong_e).toFixed(2) );
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
                    $("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
                }
            }else
            {
                if ( $("#id_dai_kuan_zong_e").textbox('getValue') == 0)
                {
                    alert("請?zhí)顚戀J款總額");
                }
                if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
                {
                    var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
                    var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                    var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / (  Math.pow( (li_lv+1), yue_shu ) - 1 );
                    
                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略'); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2)  );
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
                    $("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
                }else
                {
                    var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
                    var li_lv =  ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                    var yi_huan_jin_e = 0;
                    var mei_yue_huan_kuan_qing_dan ="";
                    var huan_kuan_zong_e = 0;
                    for (var i = 1; i <= yue_shu; i++)
                    {
                        var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
                        mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
                        yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
                        huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
                    }
                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略'); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2) );
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue', (huan_kuan_zong_e - zong_e).toFixed(2) );
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
                    $("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
                }
            }
        }
    });
    
    $('#chong_zhi').linkbutton({
        onClick:function(){
            $(":radio[name=dai_kuan_lei_bie][value=gong_ji_jin_dai_kuan]").prop("checked",true);
            $('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
            $("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
            $('#id_ji_suan_fang_shi').tabs("select", 0);
            $("#id_dan_jia").textbox('setValue',"");
            $("#id_mian_ji").textbox('setValue',"");
            $("#id_shou_fu_bi_li").combobox('setValue',"0.3");
            $("#id_dai_kuan_zong_e").textbox('setValue',"");
            $("#id_dai_kuan_nian_shu").combobox('setValue',"360");
            $(":radio[name=huan_kuan_fang_shi][value=deng_e_ben_xi]").prop("checked",true);
            $('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
            $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',"");
            $("#id_jie_guo_shou_fu_shu_e").textbox('setValue',"");
            $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue',"");
            $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue',"");
            $("#id_jie_guo_li_xi_zong_e").textbox('setValue',"");
            $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue',"");
            $("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue',"");
            $("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue',"");
            $("#id_div_jie_guo_mei_yue_huan_kuan").show();
            $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
        }
    });

先修知識：

EasyUI用linkbutton創(chuàng)建鏈接按鈕插件古胆，用一個 <a> 標(biāo)簽表示肆良，在class屬性中添加c1到 c8可以設(shè)置按鈕顏色，參考鏈接：EasyUI Linkbutton 鏈接按鈕逸绎，參考demo：jquery-easyui-1.5.2/demo/linkbutton/basic.html惹恃、jquery-easyui-1.5.2/demo/linkbutton/style.html。
用JavaScript設(shè)置EasyUI插件事件的流程如下棺牧，以linkbutton的onClick事件為例：

$('#ji_suan').linkbutton({
    onClick:function(){
        //函數(shù)代碼放在這里
    }
});

tabs插件的getSelected方法表示獲取選中的標(biāo)簽頁面板巫糙，getTabIndex方法表示獲取指定的標(biāo)簽頁面板索引（第一個面板的索引是0），select方法表示選擇一個標(biāo)簽頁面板颊乘，參數(shù)可以是標(biāo)簽頁面板的標(biāo)題（title）或索引（index）参淹，參考鏈接：EasyUI Tabs 標(biāo)簽頁/選項卡醉锄，參考demo：jquery-easyui-1.5.2/demo/tabs/tabstools.html，/jquery-easyui-1.5.2/demo/tabs/dropdown.html浙值。
combobox插件的getValue方法表示獲取組合框的值恳不，參考demo：jquery-easyui-1.5.2/demo/combobox/actions.html。

10.房貸計算器EasyUI部分的源代碼

HTML源代碼：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>房貸計算器</title>
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/themes/color.css">
    <link rel="stylesheet" type="text/css" href="jquery-easyui-1.5.2/demo/demo.css">
</head>
<body>
    <h2>房貸計算器</h2>
    <div class="easyui-layout" style="width:801px;height:570px;">
        <div data-options="region:'center',title:'房貸詳情'"  style="padding:10px;"  >
            
            <div style="width:380px;height:100px;  margin-bottom: 10px ">
                <div class="easyui-panel" title="貸款類別" style="width:380px;height:100px; padding:10px; " >

                    <div>
                        <input id="cc" style="width:250px;">
                    </div>
                    <div id="sp">
                        <div style="line-height:22px;background:#fafafa;padding:5px;">請選擇貸款類別</div>
                        <div style="padding:10px">
                            <input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked ="checked" ><span>公積金貸款</span><br/>
                            <input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan"><span>商業(yè)貸款</span>
                        </div>
                    </div>

                    <div>
                        <input  id="id_dai_kuan_li_lv" class="easyui-textbox" type="text" name="dai_kuan_li_lv" value="3.25" label="貸款利率:" labelPosition="left" style="width:250px;"> %

                    </div>
                </div>
            </div>
            
            <div style="width:380px;height:130px;  margin-bottom: 10px ">
                <div id="id_ji_suan_fang_shi" class="easyui-tabs" style="width:380px;height:130px">
                    <div title="根據(jù)面積亥鸠、單價妆够、首付比例計算" style="padding:10px">
                        <div>
                            <input  id="id_dan_jia" class="easyui-textbox" type="text" name="dan_jia" label="單價:" labelPosition="left" style="width:250px;"> 元/平方米
                        </div>

                        <div>
                            <input  id="id_mian_ji" class="easyui-textbox" type="text" name="mian_ji" label="面積:" labelPosition="left" style="width:250px;"> 平方米
                        </div>

                        <div >
                            <select id ="id_shou_fu_bi_li" class="easyui-combobox" name="shou_fu_bi_li" label="首付比例:" labelPosition="left" style="width:250px;">
                                <option value="0">無</option>
                                <option value="0.1">1成</option>
                                <option value="0.2">2成</option>
                                <option value="0.3" selected = "selected">3成</option>
                                <option value="0.4">4成</option>
                                <option value="0.5">5成</option>
                                <option value="0.6">6成</option>
                                <option value="0.7">7成</option>
                                <option value="0.8">8成</option>
                                <option value="0.9">9成</option>
                            </select>
                        </div>
                    </div>
                    
                    <div title="根據(jù)貸款總額計算" style="padding:10px">
                        <div>
                            <input  id="id_dai_kuan_zong_e" class="easyui-textbox" type="text" name="dai_kuan_zong_e" label="貸款總額:" labelPosition="left" style="width:250px;"> 元
                        </div>
                    </div>
                </div>
            </div>
            
            <div style="width:380px;height:100px;  margin-bottom: 10px ">
                <div  class="easyui-panel" title="貸款年數(shù)" style="width:380px;height:100px; padding:10px;">
                    <div >
                        <select id="id_dai_kuan_nian_shu" class="easyui-combobox" name="dai_kuan_nian_shu" style="width:250px;" label="選擇貸款年數(shù):" labelPosition="left">
                            <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">20年(240期)</option>
                            <option value="252">21年(252期)</option>
                            <option value="264">22年(264期)</option>
                            <option value="276">23年(276期)</option>
                            <option value="288">24年(288期)</option>
                            <option value="300">25年(300期)</option>
                            <option value="312">26年(312期)</option>
                            <option value="324">27年(324期)</option>
                            <option value="336">28年(336期)</option>
                            <option value="348">29年(348期)</option>
                            <option value="360" selected = "selected" >30年(360期)</option>
                        </select>
                    </div>

                </div>
            </div>
            
            <div style="width:380px;height:80px;  margin-bottom: 10px ">
                <div class="easyui-panel" title="還款方式" style="width:380px;height:80px; padding:10px;">

                    <div>
                        <input id="cc2" style="width:250px;">
                    </div>
                    <div id="sp2">
                        <div style="line-height:22px;background:#fafafa;padding:5px;">請選擇還款方式</div>
                        <div style="padding:10px">
                            <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked ="checked" ><span>等額本息</span><br/>
                            <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin"><span>等額本金</span>
                        </div>
                    </div>

                </div>
            </div>
            
            <div style="width:280px;height:30px;  margin-bottom: 10px ; padding-left: 100px ">
                <a href="#" id = "ji_suan" class="easyui-linkbutton c6" style="width:80px" >計算</a>
                <a href="#" id = "chong_zhi" class="easyui-linkbutton c2" style="width:80px">重置</a>
            </div>
        </div>
        
        <div data-options="region:'east',title:'計算結(jié)果',collapsible:false" style="width:400px;">
            <div style="width:370px;height:500px;  margin-bottom: 10px ;padding:10px">
                <div>
                    <input  id="id_jie_guo_fang_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guofang_kuan_zong_e" label="房款總額:" labelPosition="left" style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_shou_fu_shu_e" class="easyui-textbox" type="text" name="jie_guo_shou_fu_shu_e" label="首付數(shù)額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_dai_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_zong_e" label="貸款總額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_huan_kuan_zong_e" class="easyui-textbox" type="text" name="jie_guo_huan_kuan_zong_e" label="還款總額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_li_xi_zong_e" class="easyui-textbox" type="text" name="jie_guo_li_xi_zong_e" label="利息總額:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div>
                    <input  id="id_jie_guo_dai_kuan_yue_shu" class="easyui-textbox" type="text" name="jie_guo_dai_kuan_yue_shu" label="貸款月數(shù):" labelPosition="left"style="width:250px;"> 元
                </div>
                <div id="id_div_jie_guo_mei_yue_huan_kuan">
                    <input  id="id_jie_guo_mei_yue_huan_kuan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan" label="每月還款:" labelPosition="left"style="width:250px;"> 元
                </div>
                <div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
                    <input  id="id_jie_guo_mei_yue_huan_kuan_qing_dan" class="easyui-textbox" type="text" name="jie_guo_mei_yue_huan_kuan_qing_dan" label="每月還款:" labelPosition="left" multiline="true" style="width:250px;height:200px"> 
                </div>
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="fd_easyui.js"></script>
</body>
</html>

JavaScript源代碼：

$(document).ready(function(){
    $('#cc').combo({
        editable:false,
        label:'選擇貸款類型:',
        labelPosition:'left'
    });
    
    $('#sp').appendTo($('#cc').combo('panel'));
           
    $('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
            
    $('#sp input').click(function(){
        var v = $(this).val();
        var s = $(this).next('span').text();
        $('#cc').combo('setValue', v).combo('setText', s).combo('hidePanel');
    });
    
    $("#sp input").change(function () {
        if ( $("input:radio[name=dai_kuan_lei_bie]:checked").val() == "shang_ye_dai_kuan")
        {
            $("#id_dai_kuan_li_lv").textbox('setValue',"4.90");
        } else
        {
            $("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
        }
    });
    
    $('#cc2').combo({
        required:true,
        editable:false,
        label:'選擇還款方式:',
        labelPosition:'left'
    });
    
    $('#sp2').appendTo($('#cc2').combo('panel'));
  
    $('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
            
    $('#sp2 input').click(function(){
        var v = $(this).val();
        var s = $(this).next('span').text();
        $('#cc2').combo('setValue', v).combo('setText', s).combo('hidePanel');
    });
    
    $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
                
    $("input:radio[name=huan_kuan_fang_shi]").change(function () {
        if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi")
        {
            $("#id_div_jie_guo_mei_yue_huan_kuan").show();
            $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
        } else
        {
            $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").show();
            $("#id_div_jie_guo_mei_yue_huan_kuan").hide();
        }
    });
    
    $('#ji_suan').linkbutton({
        onClick:function(){
            if( $('#id_ji_suan_fang_shi').tabs('getTabIndex', $('#id_ji_suan_fang_shi').tabs('getSelected'))== 0)
            {
                if ( $("#id_dan_jia").textbox('getValue') == 0)
                {
                    alert("請?zhí)顚憜蝺r");
                }
                if ($("#id_mian_ji").textbox('getValue') == 0)
                {
                    alert("請?zhí)顚懨娣e");
                }
                if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
                {
                    var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue'); 
                    var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
                    var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
                    var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                    var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / (  Math.pow( (li_lv+1), yue_shu ) - 1 );

                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',fang_kuan_zong_e); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li);
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e);
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2));
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2));
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu);
                    $("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
                }else
                {
                    var fang_kuan_zong_e = $("#id_dan_jia").textbox('getValue') *$("#id_mian_ji").textbox('getValue');
                    var sou_fu_bi_li = $("#id_shou_fu_bi_li").combobox('getValue');
                    var zong_e = fang_kuan_zong_e * ( 1.0 - sou_fu_bi_li );
                    var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                            
                    var yi_huan_jin_e = 0;
                    var mei_yue_huan_kuan_qing_dan ="";
                    var huan_kuan_zong_e = 0;
                    for (var i = 1; i <= yue_shu; i++)
                    {
                        var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
                        mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
                        yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
                        huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
                    }
                
                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue', fang_kuan_zong_e ); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue', fang_kuan_zong_e * sou_fu_bi_li );
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e ); 
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2)  );
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue',(huan_kuan_zong_e - zong_e).toFixed(2) );
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
                    $("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
                }
            }else
            {
                if ( $("#id_dai_kuan_zong_e").textbox('getValue') == 0)
                {
                    alert("請?zhí)顚戀J款總額");
                }
                if ( $("input:radio[name=huan_kuan_fang_shi]:checked").val() == "deng_e_ben_xi" )
                {
                    var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
                    var li_lv = ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                    var mei_yue_huan_kuan = ( zong_e * li_lv * Math.pow( (li_lv+1), yue_shu ) ) / (  Math.pow( (li_lv+1), yue_shu ) - 1 );
                    
                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略'); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu).toFixed(2)  );
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue', (mei_yue_huan_kuan * yue_shu - zong_e).toFixed(2) );
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
                    $("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue', mei_yue_huan_kuan.toFixed(2) );
                }else
                {
                    var zong_e = $("#id_dai_kuan_zong_e").textbox('getValue');
                    var li_lv =  ( $("#id_dai_kuan_li_lv").textbox('getValue') / 100.0) / 12.0;
                    var yue_shu = $("#id_dai_kuan_nian_shu").combobox('getValue');
                    var yi_huan_jin_e = 0;
                    var mei_yue_huan_kuan_qing_dan ="";
                    var huan_kuan_zong_e = 0;
                    for (var i = 1; i <= yue_shu; i++)
                    {
                        var dang_yue_huan_kuan_e = ( zong_e / yue_shu ) + ( zong_e - yi_huan_jin_e ) * li_lv;
                        mei_yue_huan_kuan_qing_dan = mei_yue_huan_kuan_qing_dan + i + "月," + dang_yue_huan_kuan_e.toFixed(2) +"元\n";
                        yi_huan_jin_e = yi_huan_jin_e + ( zong_e / yue_shu );
                        huan_kuan_zong_e = huan_kuan_zong_e + dang_yue_huan_kuan_e;
                    }
                    $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue','略'); 
                    $("#id_jie_guo_shou_fu_shu_e").textbox('setValue','略');
                    $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue', zong_e );
                    $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue', huan_kuan_zong_e.toFixed(2) );
                    $("#id_jie_guo_li_xi_zong_e").textbox('setValue', (huan_kuan_zong_e - zong_e).toFixed(2) );
                    $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue', yue_shu );
                    $("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue', mei_yue_huan_kuan_qing_dan );
                }
            }
        }
    });
    
    $('#chong_zhi').linkbutton({
        onClick:function(){
            $(":radio[name=dai_kuan_lei_bie][value=gong_ji_jin_dai_kuan]").prop("checked",true);
            $('#cc').combo('setValue', "gong_ji_jin_dai_kuan").combo('setText', "公積金貸款");
            $("#id_dai_kuan_li_lv").textbox('setValue',"3.25");
            $('#id_ji_suan_fang_shi').tabs("select", 0);
            $("#id_dan_jia").textbox('setValue',"");
            $("#id_mian_ji").textbox('setValue',"");
            $("#id_shou_fu_bi_li").combobox('setValue',"0.3");
            $("#id_dai_kuan_zong_e").textbox('setValue',"");
            $("#id_dai_kuan_nian_shu").combobox('setValue',"360");
            $(":radio[name=huan_kuan_fang_shi][value=deng_e_ben_xi]").prop("checked",true);
            $('#cc2').combo('setValue', "deng_e_ben_xi").combo('setText', "等額本息");
            $("#id_jie_guo_fang_kuan_zong_e").textbox('setValue',"");
            $("#id_jie_guo_shou_fu_shu_e").textbox('setValue',"");
            $("#id_jie_guo_dai_kuan_zong_e").textbox('setValue',"");
            $("#id_jie_guo_huan_kuan_zong_e").textbox('setValue',"");
            $("#id_jie_guo_li_xi_zong_e").textbox('setValue',"");
            $("#id_jie_guo_dai_kuan_yue_shu").textbox('setValue',"");
            $("#id_jie_guo_mei_yue_huan_kuan").textbox('setValue',"");
            $("#id_jie_guo_mei_yue_huan_kuan_qing_dan").textbox('setValue',"");
            $("#id_div_jie_guo_mei_yue_huan_kuan").show();
            $("#id_div_jie_guo_mei_yue_huan_kuan_qing_dan").hide();
        }
    });
});

11.房貸計算器EasyUI部分最終效果截圖

最后編輯于：2017.12.08 05:35:35

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市负蚊，隨后出現(xiàn)的幾起案子神妹，更是在濱河造成了極大的恐慌，老刑警劉巖家妆，帶你破解...
沈念sama閱讀 206,723評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件鸵荠，死亡現(xiàn)場離奇詭異，居然都是意外死亡伤极，警方通過查閱死者的電腦和手機蛹找，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,485評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來哨坪，“玉大人庸疾，你說我怎么就攤上這事〉北啵” “怎么了届慈？”我有些...
開封第一講書人閱讀 152,998評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長忿偷。經(jīng)常有香客問我金顿，道長，這世上最難降的妖魔是什么鲤桥？我笑而不...
開封第一講書人閱讀 55,323評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任揍拆，我火速辦了婚禮，結(jié)果婚禮上茶凳，老公的妹妹穿的比我還像新娘嫂拴。我一直安慰自己，他們只是感情好贮喧，可當(dāng)我...
茶點故事閱讀 64,355評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布顷牌。她就那樣靜靜地躺著，像睡著了一般塞淹。火紅的嫁衣襯著肌膚如雪窟蓝。梳的紋絲不亂的頭發(fā)上，一...
開封第一講書人閱讀 49,079評論 1贊 285
城市分裂傳說
那天，我揣著相機與錄音运挫，去河邊找鬼状共。笑死，一個胖子當(dāng)著我的面吹牛谁帕，可吹牛的內(nèi)容都是我干的峡继。我是一名探鬼主播，決...
沈念sama閱讀 38,389評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼匈挖，長吁一口氣：“原來是場噩夢啊……” “哼碾牌！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起儡循，我...
開封第一講書人閱讀 37,019評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤舶吗，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后择膝，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體誓琼，經(jīng)...
沈念sama閱讀 43,519評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 35,971評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年肴捉，在試婚紗的時候發(fā)現(xiàn)自己被綠了腹侣。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 38,100評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡齿穗，死狀恐怖傲隶，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情窃页，我是刑警寧澤伦籍，帶...
沈念sama閱讀 33,738評論 4贊 324
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布，位于F島的核電站腮出，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏芝薇。R本人自食惡果不足惜胚嘲，卻給世界環(huán)境...
茶點故事閱讀 39,293評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望洛二。院中可真熱鬧馋劈，春花似錦、人聲如沸晾嘶。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,289評論 0贊 19
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽垒迂。三九已至械姻，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間机断，已是汗流浹背楷拳。一陣腳步聲響...
開封第一講書人閱讀 31,517評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工绣夺，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人欢揖。一個月前我還...
沈念sama閱讀 45,547評論 2贊 354
代替公主和親
正文我出身青樓陶耍，卻偏偏與公主長得像，于是被迫代替她去往敵國和親她混。傳聞我的和親對象是個殘疾皇子烈钞，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 42,834評論 2贊 345

jQueryEasyUI實現(xiàn)房貸計算器詳細教程3--EasyUI部分

1.從載入EasyUI開始

2.如何學(xué)習(xí)EasyUI

3.頁面布局

4.選擇貸款類別

5.選擇計算方式

6.選擇貸款年數(shù)

7.顯示計算結(jié)果

8.實現(xiàn)選擇還款方式

9.計算恬偷、重置按鈕

10.房貸計算器EasyUI部分的源代碼

11.房貸計算器EasyUI部分最終效果截圖

推薦閱讀更多精彩內(nèi)容