您的位置:首页 > Web前端 > JavaScript

输入一个数据,自动算出相关的第二个数据,javascript实现

2011-05-07 15:55 591 查看


如上图,根据身高其一数据,算出另一数据,实现如下:

首先html代码部分:

<table>
<tr>
<td>身高</td>
<td><input name="height" id="idheight_cm" onkeyup="CMtoFTInch(event);" type="text"> cm</td>
<td>
<input id="idheight_ft" onkeyup="FTInchtoCM(event);" type="text"> ft
<input id="idheight_inch" onkeyup="FTInchtoCM(event);" type="text"> inch
</td>
</tr>
</table>

输入框都标有id,然后按键弹起的时候出发相应的函数

function CMtoFTInch(evt){                                             //厘米转化为英寸
evt = evt ? evt : (window.event ? window.event : null);           //event对象赋值
if(evt){                                                          //如果event对象为真的话
var ecode = evt.keyCode;                                      //把event对象的虚拟键盘码赋值
if(ecode == 9){
//tab key is not allowed                                      //不允许tab键(9为tab)
return;
}
}
var value = parseFloat(document.getElementById("idheight_cm").value);                      //解析id为idheight_cm的值,并返回浮点数
if(value == '' || isNaN(value)){                                                              //检测返回的值是不是为空,或者是不是合法数字
document.getElementById("idheight_ft").value = '';                                       //把idheight_ft的值赋值为空
document.getElementById("idheight_inch").value = '';                                     //把idheight_inch的值赋值为空
}else{
SetCookie(document.getElementById("idheight_cm").name, value.toString());                //向客户端发送cookie
value /= 2.54;value += 0.005;                                                                      //把数值进行计算
var result = (value/12).toString();                                                                //继续计算得出结果
var index = result.indexOf('.');                                                                   //返回小数点在字符串中首次出现的位置
document.getElementById("idheight_ft").value = result.substring(0, index);
result = (value%12 + 0.5).toString();
index = result.indexOf('.');
document.getElementById("idheight_inch").value = result.substring(0, index);
}
}
function FTInchtoCM(evt){
evt = evt ? evt : (window.event ? window.event : null);
if(evt){
var ecode = evt.keyCode;
if(ecode == 9){
//tab key is not allowed
return;
}
}
var valueft = parseFloat(document.getElementById("idheight_ft").value);
var valueinch = parseFloat(document.getElementById("idheight_inch").value);
if((valueft == '' || isNaN(valueft)) && (valueinch == '' || isNaN(valueinch))){
document.getElementById("idheight_cm").value = '';
}else{
if(valueft == '' || isNaN(valueft)){valueft = 0;}
if(valueinch == '' || isNaN(valueinch)){valueinch = 0;
}
var result = ((valueft * 12 + valueinch)*2.54 + 0.005).toString();
var index = result.indexOf('.');
document.getElementById("idheight_cm").value = result.substring(0, index + 3);
SetCookie(document.getElementById("idheight_cm").name, result.substring(0, index + 3));
}

}

借此机会,补充一下自己的js知识,HTML DOM Event 对象

Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。

IE属性keycode

对于 keypress 事件,该属性声明了被敲击的键生成的 Unicode 字符码。对于 keydown 和 keyup 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐