输入一个数据,自动算出相关的第二个数据,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 事件,它指定了被敲击的键的虚拟键盘码。虚拟键盘码可能和使用的键盘的布局相关。
相关文章推荐
- 实现一个函数clone,可以对javascript中的5种主要的数据类型进行值复制。
- 一个只能输入数值型数据的文本框类实现(C#)
- 用javascript判断输入数据是否货币并自动添加¥符号的代码
- 基于javascript实现浏览器滚动条快到底部时自动加载数据
- javascript 一个文本框输入完毕后自动跳转到下一个文本框的方法
- 基于javascript实现浏览器滚动条快到底部时自动加载数据
- JavaScript-----用js实现输入提示(自动完成)[转载]
- 使用EF6和MVC5实现一个简单的选课系统--使用EF6读取相关数据(7/12)
- JavaScript实现x秒后自动跳转到一个页面
- 数据结构与算法——用C语言实现一个revert函数,它的功能是将输入的字符串在原串上倒序后返回
- 用 javascript 实现随机抽奖 ( 从 1 到 输入值之间任取一个整数值)
- c语言:模拟实现一个输入密码自动取款的程序
- cookie是指web浏览器存储的少量数据,该数据会在每次请求一个相关的URL时自动传到服务器中(转)
- 实现一个函数clone,可以对JavaScript中的5种主要的数据类型(包括Number、String、Object、Array、Boolean)进行值复制。
- 有一头母牛,它每年年初生一头小母牛。每头小母牛从第四个年头开始,每年年初也生一头小母牛。请编程实现在第n年的时候,共有多少头母牛?输入数据由多个测试实例组成,每个测试实例占一行,包括一个整数n(0<n
- 一个通用的单元测试框架的思考和设计04-实现篇-自动管理测试数据
- 使用EF6和MVC5实现一个简单的选课系统--使用EF6更新相关数据(8/12)
- 应用自定义控件实现页面输入数据自动判断
- javascript 一个文本框输入完毕后自动跳转到下一个文本框的方法
- JavaScript实现一个简单数据结构栈