久久一精选91,AV国产在线网,热久久国产精品

1.HTML文件的基本構(gòu)成

我們從最基礎(chǔ)的一段HTML代碼開始編程：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>房貸計算器</title>   
    </head>

    <body>
    
    </body>
</html>

這段代碼包含了一個HTML的骨架，是每個HTML文件都需要的部分。讀者需要了解HTML文件是由一層層的標(biāo)簽組成的，并掌握了以下先修知識，便可以動手編輯HTML代碼。

先修知識：

HTML簡介，只需要對HTML有一個簡略了解即可，包括什么是HTML，如何打開、編輯、新建一個HTML文件。參考鏈接：關(guān)于HTML。編輯HTML文件推薦使用Brackets，開啟實時預(yù)覽功能，可以隨時觀察編寫的HTML是否符合預(yù)期，參考鏈接：Brackets官網(wǎng)，Brackets教程。
需要了解 <html>標(biāo)簽、<head> 標(biāo)簽、<body>標(biāo)簽和 <title>標(biāo)簽各自的作用。參考鏈接：<html>標(biāo)簽。
<!DOCTYPE>聲明告知瀏覽HTML文件的版本。參考鏈接：<!DOCTYPE >。
<meta>標(biāo)簽的cahrset屬性定義了HTML文件的字符編碼，讀者可以在每個標(biāo)簽的參考鏈接中查找到標(biāo)簽包含哪些屬性。參考鏈接：<meta> 。關(guān)于UTF-8只需要知道可以正確顯示中文即可，參考鏈接： UTF-8。

2.房貸計算器的內(nèi)容部分

在網(wǎng)上找到一個網(wǎng)頁版的房貸計算器，或者觀察教程的運行結(jié)果截圖，思考一個網(wǎng)頁版的房貸計算器需要用戶輸入哪些信息，需要計算出哪些數(shù)據(jù)，用什么樣的HTML標(biāo)簽可以實現(xiàn)所需要的功能。

2.1. 貸款類別。

需要用戶選擇貸款類別是商業(yè)貸款還是公積金貸款。

效果截圖：

源代碼：

貸款類別:
<input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked = "checked">公積金貸款
<input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan">商業(yè)貸款

先修知識：

純文本在HTML文件中直接輸入即可。換行符需要用標(biāo)簽實現(xiàn)，所以運行的結(jié)果都在一行顯示。
用單選按鈕實現(xiàn)用戶選擇商業(yè)貸款還是公積金貸款的功能。<input> 標(biāo)簽用于搜集用戶信息，根據(jù)不同的 type 屬性值，輸入字段擁有很多種形式，可以是單行文本框、文本域、單選按鈕等。name屬性代表單選按鈕的名字，名字相同的是同一組單選按鈕，即使兩個按鈕不挨在一起也行；value屬性代表每一個按鈕的值，在后面判斷選中了哪一個按鈕時會用到；checked屬性表示默認(rèn)選中的是哪一個按鈕，參考鏈接： <input> 。

為了字段的名字和值便于識別，減少學(xué)習(xí)負(fù)擔(dān)，代碼中全部使用了漢語全拼加下劃線表示。

2.2貸款利率

需要向用戶展示每種貸款類別的貸款利率，教程中采用是2017年4月份的貸款利率。

效果截圖：

源代碼：

<br>
<br>
貸款利率:
<input type="text" id="id_dai_kuan_li_lv" name="dai_kuan_li_lv" value="3.25">
%

先修知識：

<br>標(biāo)簽用來表示一個換行，參考鏈接：換行符
單行文本框用來向用戶展示單行文本數(shù)據(jù)，或者向用戶收集單行文本數(shù)據(jù)。value屬性表示文本框的值，并顯示在文本框中，這個值在后續(xù)的交互部分還會根據(jù)用戶選擇的貸款類型改變。id屬性是一個全局屬性（每一個標(biāo)簽都可以用的屬性），表示這個標(biāo)簽在HTML文檔中的唯一標(biāo)識，后續(xù)用jQuery選中某一個標(biāo)簽時，會用到這個屬性，參考鏈接：全局屬性，id屬性。

2.3計算方式

用戶需要選擇計算方式，是根據(jù)單價面積首付比例算出貸款總額，還是由用戶直接輸入貸款總額。

效果截圖：

源代碼：

        <br>--------------------------------------------------
        <br>
        計算方式:
        <br>
        <br>
        <input type="radio" name="ji_suan_fang_shi" value="gen_ju_mian_ji" checked="checked">根據(jù)面積、單價、首付比例計算

        <div id="id_div_gen_ju_mian_ji">
            <br>

            單價:
            <input id="id_dan_jia" type="text" name="dan_jia"  >
            元/平方米

            <br>
            <br>
            面積:
            <input id="id_mian_ji" type="text" name="mian_ji"  >
            平方米

            <br>
            <br>

            首付比例:
            <select id="id_shou_fu_bi_li" name="shou_fu_bi_li">
                <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>

        <br>
        <br>
        <input type="radio" name="ji_suan_fang_shi" value="gen_ju_zong_e">根據(jù)貸款總額計算
        <div id="id_div_gen_ju_zong_e">
            <br>
            貸款總額:
            <input id="id_dai_kuan_zong_e" type="text" name="dai_kuan_zong_e"  >
            元
        </div>

先修知識：

<div>標(biāo)簽用來分塊，此處是為了后續(xù)當(dāng)用戶選中一種計算方式時，將另一種計算方式的分塊內(nèi)的全部內(nèi)容隱藏起來做準(zhǔn)備，參考鏈接： <div>。
<select>標(biāo)簽標(biāo)示一個選擇列表，用來實現(xiàn)用戶選擇首付比例的功能。<option> 標(biāo)簽表示下拉列表中的一個選項,selected屬性表示默認(rèn)選中項,value的值設(shè)置為對應(yīng)的小數(shù)，是為了后續(xù)計算還款數(shù)額做準(zhǔn)備。參考鏈接: <select>, <option>。

2.4貸款年數(shù)、還款方式以及計算按鈕

用戶需要選擇貸款年數(shù)，采用等額本息還款還是等額本金還款，當(dāng)用戶點擊計算按鈕時，會計算出還款詳情，當(dāng)用戶點擊重置按鈕時，會恢復(fù)每個標(biāo)簽的初始值。

效果截圖：

源代碼：

        <br>--------------------------------------------------
        <br>
        貸款年數(shù):
        <select id="id_dai_kuan_nian_shu" name="dai_kuan_nian_shu">
            <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>
        <br>
        <br>
        還款方式:
        <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked="checked">等額本息
        <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin">等額本金

        <br>
        <br>

        <button id="ji_suan" type = "button">計算</button>
        <button id="chong_zhi" type = "button">重置</button>
        <br>
        <br>--------------------------------------------------

先修知識：
1.<button>標(biāo)簽標(biāo)示一個按鈕，type屬性規(guī)定了按鈕的類型，參考鏈接：<button>。

選擇列表的值，取的是對應(yīng)的月數(shù)，是為后續(xù)計算還款詳情做準(zhǔn)備。

2.5計算結(jié)果

點擊計算按鈕后需要向用戶展示計算結(jié)果。等額本息每月還款額固定，采用單行文本框來表示，等額本金每月還款額不同，采用文本域來表示。并將這兩個標(biāo)簽的相關(guān)內(nèi)容寫在不同的分塊中，為后續(xù)選擇還款方式后，隱藏另外一個分塊做準(zhǔn)備。

效果截圖：

源代碼：

        <br>
        結(jié)果：
        <br>
        <br>
        房款總額:
        <input id="id_jie_guo_fang_kuan_zong_e" type="text" name="jie_guo_fang_kuan_zong_e" >
        元
        <br>
        <br>
        首付數(shù)額:
        <input id="id_jie_guo_shou_fu_shu_e" type="text" name="jie_guo_shou_fu_shu_e" >
        元
        <br>
        <br>
        貸款總額:
        <input id="id_jie_guo_dai_kuan_zong_e" type="text" name="jie_guo_dai_kuan_zong_e" >
        元
        <br>
        <br>
        還款總額:
        <input id="id_jie_guo_huan_kuan_zong_e" type="text" name="jie_guo_huan_kuan_zong_e" >
        元
        <br>
        <br>
        利息總額:
        <input id="id_jie_guo_li_xi_zong_e" type="text" name="jie_guo_li_xi_zong_e" >
        元
        <br>
        <br>
        貸款月數(shù):
        <input id="id_jie_guo_dai_kuan_yue_shu" type="text" name="jie_guo_dai_kuan_yue_shu" >
        月
        <br>
   
        <div id="id_div_jie_guo_mei_yue_huan_kuan">
            <br> 
            每月還款:
            <input id="id_jie_guo_mei_yue_huan_kuan" type="text" name="jie_guo_mei_yue_huan_kuan" >
            元
        </div>    
        
        <div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
            <br>
            每月還款:
            <textarea id="id_jie_guo_mei_yue_huan_kuan_qing_dan" name="jie_guo_mei_yue_huan_kuan_qing_dan" rows="10" cols="21">
            </textarea>
        </div>

先修知識：

<textarea>標(biāo)簽標(biāo)示文本域， cols 和 rows 屬性來設(shè)置 textarea 的尺寸，參考鏈接：<textarea>。

3.房貸計算器HTML部分的源代碼

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>房貸計算器</title>   
    </head>

    <body>
        貸款類別:
        <input type="radio" name="dai_kuan_lei_bie" value="gong_ji_jin_dai_kuan" checked = "checked">公積金貸款
        <input type="radio" name="dai_kuan_lei_bie" value="shang_ye_dai_kuan">商業(yè)貸款
        
        <br>
        <br>
        貸款利率:
        <input type="text" id="id_dai_kuan_li_lv" name="dai_kuan_li_lv" value="3.25">
        %
        
        <br>--------------------------------------------------
        <br>
        計算方式:
        <br>
        <br>
        <input type="radio" name="ji_suan_fang_shi" value="gen_ju_mian_ji" checked="checked">根據(jù)面積、單價、首付比例計算

        <div id="id_div_gen_ju_mian_ji">
            <br>

            單價:
            <input id="id_dan_jia" type="text" name="dan_jia"  >
            元/平方米

            <br>
            <br>
            面積:
            <input id="id_mian_ji" type="text" name="mian_ji"  >
            平方米

            <br>
            <br>

            首付比例:
            <select id="id_shou_fu_bi_li" name="shou_fu_bi_li">
                <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>

        <br>
        <br>
        <input type="radio" name="ji_suan_fang_shi" value="gen_ju_zong_e">根據(jù)貸款總額計算
        <div id="id_div_gen_ju_zong_e">
            <br>
            貸款總額:
            <input id="id_dai_kuan_zong_e" type="text" name="dai_kuan_zong_e"  >
            元
        </div>  
        <br>--------------------------------------------------
        <br>
        貸款年數(shù):
        <select id="id_dai_kuan_nian_shu" name="dai_kuan_nian_shu">
            <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>
        <br>
        <br>
        還款方式:
        <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_xi" checked="checked">等額本息
        <input type="radio" name="huan_kuan_fang_shi" value="deng_e_ben_jin">等額本金

        <br>
        <br>

        <button id="ji_suan" type ="button">計算</button>
        <button id="chong_zhi" type = "button">重置</button>
        <br>
        <br>--------------------------------------------------
        <br>
        結(jié)果：
        <br>
        <br>
        房款總額:
        <input id="id_jie_guo_fang_kuan_zong_e" type="text" name="jie_guo_fang_kuan_zong_e" >
        元
        <br>
        <br>
        首付數(shù)額:
        <input id="id_jie_guo_shou_fu_shu_e" type="text" name="jie_guo_shou_fu_shu_e" >
        元
        <br>
        <br>
        貸款總額:
        <input id="id_jie_guo_dai_kuan_zong_e" type="text" name="jie_guo_dai_kuan_zong_e" >
        元
        <br>
        <br>
        還款總額:
        <input id="id_jie_guo_huan_kuan_zong_e" type="text" name="jie_guo_huan_kuan_zong_e" >
        元
        <br>
        <br>
        利息總額:
        <input id="id_jie_guo_li_xi_zong_e" type="text" name="jie_guo_li_xi_zong_e" >
        元
        <br>
        <br>
        貸款月數(shù):
        <input id="id_jie_guo_dai_kuan_yue_shu" type="text" name="jie_guo_dai_kuan_yue_shu" >
        月
        <br>
       
        <div id="id_div_jie_guo_mei_yue_huan_kuan">
            <br> 
            每月還款:
            <input id="id_jie_guo_mei_yue_huan_kuan" type="text" name="jie_guo_mei_yue_huan_kuan" >
            元
        </div>    
        
        <div id="id_div_jie_guo_mei_yue_huan_kuan_qing_dan">
            <br>
            每月還款:
            <textarea id="id_jie_guo_mei_yue_huan_kuan_qing_dan" name="jie_guo_mei_yue_huan_kuan_qing_dan" rows="10" cols="21">
            </textarea>
        </div>
        

    </body>
</html>

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

jQueryEasyUI實現(xiàn)房貸計算器詳細(xì)教程1--HTML部分

jQueryEasyUI實現(xiàn)房貸計算器詳細(xì)教程1--HTML部分

1.HTML文件的基本構(gòu)成

2.房貸計算器的內(nèi)容部分

2.1. 貸款類別。

2.2貸款利率

2.3計算方式

2.4貸款年數(shù)、還款方式以及計算按鈕

2.5計算結(jié)果

3.房貸計算器HTML部分的源代碼

4.HTML部分最終效果截圖：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

jQueryEasyUI實現(xiàn)房貸計算器詳細(xì)教程1--HTML部分

1.HTML文件的基本構(gòu)成

2.房貸計算器的內(nèi)容部分

2.1. 貸款類別。

2.2貸款利率

2.3計算方式

2.4貸款年數(shù)、還款方式以及計算按鈕

2.5計算結(jié)果

3.房貸計算器HTML部分的源代碼

4.HTML部分最終效果截圖：

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

2.1. 貸款類別。

2.4貸款年數(shù)、還款方式以及計算按鈕