一、问题：计算矩形房间的面积。
二、要求：
1、提供用户输入长和宽
2、输出英尺和米的单位选择
3、输出平方英尺和平方米的数值
4、结果保留两位有效小数
5、只能输入数值
6、让计算与输出分离
7、使用一个常量来保存转换因子。
三、首先我们还是先确定元素。
有两个输入，长和宽
有一个单选控件选择单位英尺或者米
有两个输出，平方英尺和平方米
有一个常量转换因子。平方英尺和平方米之间的转换公式是：平方米=平方英尺*0.09290304
四、使用已有的函数
为什么我们要把方法写成独立的函数，当一个方法测试可用之后，可以实现代码复用，减少后面的开发工作。
输出函数我们可以使用上一节课中定义的函数
function point(str,elementId) { document.getElementById(elementId).innerHTML=str; }
五、构建工具函数
我们可以把一些比较常用的方法构建成工具，一般框架里面会写一个util.js文件。
如上面那个point输出函数就能算是一个工具函数。
接下来我们编写，取输入框值函数getInputValueById
function getInputValueById(elementId){ return document.getElementById(elementId).value; }
取单选框函数getRadioValueByName
function getRadioValueByName(radioName){ var value=""; var radio=document.getElementsByName(radioName); for(var i=0;i<radio.length;i++){ if(radio[i].checked==true){ value=radio[i].value; break; } } return value; }
显示/隐藏div,showDivById/hideDivById
function showDivById(elementId){ document.getElementById(elementId).style.display="block"; } function hideDivById(elementId){ document.getElementById(elementId).style.display="none"; }
定义常量：之前没有常量这个关键字，在js中用全大写的变量名表示常量。就跟关键字前面带下划线（如_name）表示私有变量一样，只是一种约定俗成。
const FACTOR = 0.09290304;
六:开始实现代码逻辑，完整代码如下：
<body> <div>请输入长度:<input id="roomLength" type="text" onchange="inputChange()" onkeyup="value=value.replace(/[^\d.]/g,'')"></div> <div>请输入宽度:<input id="roomWidth" type="text" onchange="inputChange()" onkeyup="value=value.replace(/[^\d.]/g,'')"></div> <div id="errorString" style="color: red;display: none;">error:<span id="errorText"></span></div> <div> 请选择单位： <input name="Company" type="radio" value="feet" />英尺 <input name="Company" type="radio" value="meter" checked="checked"/>米 </div> <div >平方英尺为:<span id="pointFeet"></span></div> <div >平方米为:<span id="pointMeter"></span></div> <script> const FACTOR = 0.09290304;//之前没有常量这个关键字，在js中用全大写的变量名表示常量。就跟关键字前面带下划线表示私有变量一样，只是一种约定俗成。 function point(str,elementId){ document.getElementById(elementId).innerHTML=str; } function getInputValueById(elementId){ return document.getElementById(elementId).value; } function getRadioValueByName(radioName){ var value=""; var radio=document.getElementsByName(radioName); for(var i=0;i<radio.length;i++){ if(radio[i].checked==true){ value=radio[i].value; break; } } return value; } function showDivById(elementId){ document.getElementById(elementId).style.display="block"; } function hideDivById(elementId){ document.getElementById(elementId).style.display="none"; } function inputChange(){ var roomLength = getInputValueById("roomLength"); var roomWidth = getInputValueById("roomWidth"); if(roomLength === ''){ showDivById("errorString");//显示错误码 point("请输入长度","errorText");//输出错误信息 return; }else if(roomWidth === ''){ showDivById("errorString");//显示错误码 point("请输入宽度","errorText");//输出错误信息 return; }else{ hideDivById("errorString");//参数正确，确保错误信息隐藏 } var radioValue = getRadioValueByName("Company"); var pointMeter,pointFeet; switch (radioValue){ case "feet": pointFeet = parseFloat(roomLength)*parseFloat(roomWidth); pointMeter = (pointFeet * FACTOR).toFixed(2); pointFeet = pointFeet.toFixed(2); point(pointFeet,"pointFeet"); point(pointMeter,"pointMeter"); break; case "meter": pointMeter = parseFloat(roomLength)*parseFloat(roomWidth); pointFeet = (pointMeter/FACTOR).toFixed(2); pointMeter = pointMeter.toFixed(2); point(pointFeet,"pointFeet"); point(pointMeter,"pointMeter"); break; default : break } } </script> </body>
运行结果：
这里有一个bug点击切换选择单位的时候，不会触发改变输出值，大家可以自己尝试着实现。
第三节课就到这里结束了。
