jQueryEasyUI实现房贷计算器详细教程1--HTML部分

最新推荐文章于 2024-04-23 10:13:29 发布

VIP文章老皮丘

最新推荐文章于 2024-04-23 10:13:29 发布

阅读量1.1k

点赞数

分类专栏： easyui-教程文章标签： html jquery 前端

本文链接：https://blog.csdn.net/conanqgs/article/details/73744730

版权

1.HTML文件的基本构成

我们从最基础的一段HTML代码开始编程：

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

    <body>

    </body>
</html>

这段代码包含了一个HTML的骨架，是每个HTML文件都需要的部分。读者需要了解HTML文件是由一层层的标签组成的，并掌握了以下先修知识，便可以动手编辑HTML代码。

先修知识：

HTML简介，只需要对HTML有一个简略了解即可，包括什么是HTML，如何打开、编辑、新建一个HTML文件。参考链接：关于HTML。编辑HTML文件推荐使用Brackets，开启实时预览功能，可以随时观察编写的HTML是否符合预期，参考链接：Brackets官网，Brackets教程。
需要了解 <html>标签、<head> 标签、<body>标签和 <title>标签各自的作用。参考链接：html标签。
<!DOCTYPE>声明告知浏览HTML文件的版本。参考链接：!DOCTYPE 。
<meta>标签的cahrset属性定义了HTML文件的字符编码，读者可以在每个标签的参考链接中查找到标签包含哪些属性。参考链接：meta 。关于UTF-8只需要知道可以正确显示中文即可，参考链接： UTF-8。

2.房贷计算器的内容部分

在网上找到一个网页版的房贷计算器，或者观察教程的运行结果截图，思考一个网页版的房贷计算器需要用户输入哪些信息，需要计算出哪些数据，用什么样的HTML标签可以实现所需要的功能。

2.1. 贷款类别。

需要用户选择贷款类别是商业贷款还是公积金贷款。

效果截图：

源代码：

贷款类别:
<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">商业贷款

先修知识：

纯文本在HTML文件中直接输入即可。换行符需要用标签实现，所以运行的结果都在一行显示。
用单选按钮实现用户选择商业贷款还是公积金贷款的功能。<input> 标签用于搜集用户信息，根据不同的 type 属性值，输入字段拥有很多种形式，可以是单行文本框、文本域、单选按钮等。name属性代表单选按钮的名字，名字相同的是同一组单选按钮，即使两个按钮不挨在一起也行；value属性代表每一个按钮的值，在后面判断选中了哪一个按钮时会用到；checked属性表示默认选中的是哪一个按钮，参考链接： input。

为了字段的名字和值便于识别，减少学习负担，代码中全部使用了汉语全拼加下划线表示。

2.2贷款利率

需要向用户展示每种贷款类别的贷款利率，教程中采用是2017年4月份的贷款利率。

效果截图：

源代码：

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

先修知识：

<br>标签用来表示一个换行，参考链接：换行符
单行文本框用来向用户展示单行文本数据，或者向用户收集单行文本数据。value属性表示文本框的值，并显示在文本框中，这个值在后续的交互部分还会根据用户选择的贷款类型改变。id属性是一个全局属性（每一个标签都可以用的属性），表示这个标签在HTML文档中的唯一标识，后续用jQuery选中某一个标签时，会用到这个属性，参考链接：全局属性，id属性。

2.3计算方式

用户需要选择计算方式，是根据单价面积首付比例算出贷款总额，还是由用户直接输入贷款总额。

效果截图：

源代码：

        <br>--------------------------------------------------
        <br>
        计算方式:
        <br>
        <br>
        <input type="radio" name="ji_suan_fang_shi" value="gen_ju_mian_ji" checked="checked">根据面积、单价、首付比例计算

        <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=