一、问题:计算矩形房间的面积。
二、要求:
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,希望你开心。