javascript挑战编程技能-第三题:计算矩形房间面积
一、问题:计算矩形房间的面积。
二、要求:
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点击切换选择单位的时候,不会触发改变输出值,大家可以自己尝试着实现。
第三节课就到这里结束了。
有什么问题大家可以联系我本人,微信yu_xiaohu
希望大家关注我的个人公众号,有更新博客我会在上面给出通知。
我是小虎Oni,希望你开心。