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贷款利率
需要向用户展示每种贷款类别的贷款利率,教程中采用是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="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">根据贷款总额计算<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>
标签用来分块,此处是为了后续当用户选中一种计算方式时,将另一种计算方式的分块内的全部内容隐藏起来做准备,参考链接: div。<select>
标签标示一个选择列表,用来实现用户选择首付比例的功能。<option>
标签表示下拉列表中的一个选项,selected
属性表示默认选中项,value
的值设置为对应的小数,是为了后续计算还款数额做准备。参考链接: select, option。
2.4贷款年数、还款方式以及计算按钮
用户需要选择贷款年数,采用等额本息还款还是等额本金还款,当用户点击计算按钮时,会计算出还款详情,当用户点击重置按钮时,会恢复每个标签的初始值。
效果截图:
源代码:
<br>--------------------------------------------------<br>贷款年数:<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">(120期)</option><option value="132">(132期)</option><option value="144">(144期)</option><option value="156">(156期)</option><option value="168">(168期)</option><option value="180">(180期)</option><option value="192">(192期)</option><option value="204">(204期)</option><option value="216">(216期)</option><option value="228">(228期)</option><option value="240">(240期)</option><option value="252">(252期)</option><option value="264">(264期)</option><option value="276">(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>--------------------------------------------------
先修知识:
<button>
标签标示一个按钮,type
属性规定了按钮的类型,参考链接:button。
选择列表的值,取的是对应的月数,是为后续计算还款详情做准备。
2.5计算结果
点击计算按钮后需要向用户展示计算结果。等额本息每月还款额固定,采用单行文本框来表示,等额本金每月还款额不同,采用文本域来表示。并将这两个标签的相关内容写在不同的分块中,为后续选择还款方式后,隐藏另外一个分块做准备。
效果截图:
源代码:
<br>结果:<br><br>房款总额:<input id="id_jie_guo_fang_kuan_zong_e" type="text" name="jie_guo_fang_kuan_zong_e" >元<br><br>首付数额:<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>贷款月数:<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>
标签标示文本域, cols 和 rows 属性来设置 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">商业贷款<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">根据面积、单价、首付比例计算<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">根据贷款总额计算<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>贷款年数:<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">(120期)</option><option value="132">(132期)</option><option value="144">(144期)</option><option value="156">(156期)</option><option value="168">(168期)</option><option value="180">(180期)</option><option value="192">(192期)</option><option value="204">(204期)</option><option value="216">(216期)</option><option value="228">(228期)</option><option value="240">(240期)</option><option value="252">(252期)</option><option value="264">(264期)</option><option value="276">(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>结果:<br><br>房款总额:<input id="id_jie_guo_fang_kuan_zong_e" type="text" name="jie_guo_fang_kuan_zong_e" >元<br><br>首付数额:<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>贷款月数:<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>