js实现文本框支持加减运算的方法


Posted in Javascript onAugust 19, 2015

本文实例讲述了js实现文本框支持加减运算的方法。分享给大家供大家参考。具体如下:

这是一个网页表单效果,让表单内的文本框支持加减运算,不过你要按正确的运算式输入,要不然它没有那么智能哦,比如输入1+5,文本框旁边会显示计算结果,这要归功于JavaScript的功能。

运行效果截图如下:

js实现文本框支持加减运算的方法

在线演示地址如下:

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>支持加减运算的文本框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{color:#000;font-size:14px;font-family:Verdana,Arial,Helvetica,sans-serif,"宋体";}
input{border-style:solid;border-color:#868275;background-color:#f9f9f9;border-width:1px;color:#505050;vertical-align:middle;}
</style>
<script language=javascript>
function FloatAdd(arg1,arg2){
 var r1,r2,m;
 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
 m=Math.pow(10,Math.max(r1,r2))
 return (arg1*m+arg2*m)/m
}
function FloatSubtr(arg1,arg2){
 return FloatAdd(arg1,-arg2);
}
function IsMoney(Money){
 if(/^[\d|+|.|-]+$/.test(Money)) return true;
 return false;
}
function result(){
 str=document.getElementById("buy").value;
 if(!(IsMoney(str))){
  document.getElementById("amount").innerHTML ="无效金额";
  return false;
 }
 var len=str.length,money=0,Num=0;
 var NumStr="",ctrlflag="x",cflag=0;
 for(var i=0;i<len; i++){
  c= str.charAt(i);
  if((c=="+")||(c=="-")){
   if(i+1<len){
    if ((str.charAt(i+1)=="+")||(str.charAt(i+1)=="-")) continue;
   }
   if((NumStr!="")&&(isNaN(NumStr))){
    if(isNaN(NumStr)){
     document.getElementById("amount").innerHTML ="输入无效金额";
     return false;
    }
   }
   if(NumStr!=""){
   //alert("i:"+i+"NumStr:"+NumStr);
    if ((ctrlflag=="+")||(ctrlflag=="x")){
     Num=parseFloat(NumStr);
     //alert(ctrlflag+"money:"+money+"Num:"+Num);
     money=FloatAdd(money,Num);
     NumStr="";
     Num=0;
     ctrlflag=c;
    }
    else{
     //alert(money+"里面减了"+NumStr);
     Num=parseFloat(NumStr);
     money=FloatSubtr(money,Num);
     NumStr="";
     Num=0;
     ctrlflag=c;
    }
   }
   else{
    ctrlflag=c;
   }
  continue;
  }
  else{
   NumStr=NumStr+""+c;
  }
 }
 if((NumStr!="")&&(isNaN(NumStr))){
  if (isNaN(NumStr)){
   document.getElementById("amount").innerHTML ="无效金额"+NumStr;
   return false;
  }
 }
 if((ctrlflag=="-")&&(NumStr!="")){
  Num=parseFloat(NumStr); 
  money=FloatSubtr(money,Num);
 }
 if(((ctrlflag=="+")||(ctrlflag=="x"))&&((NumStr!=""))){
  Num=parseFloat(NumStr);
  money=FloatAdd(money,Num);
 }
 document.getElementById("amount").innerHTML =money;
}
</script>
</head>
<body>
请输入加减计算式:<input id="buy" name="buy" maxlength="30" type="text" onkeyup="javascript:result();">
<span id="amount"></span>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript 短路法代码精简
Aug 20 Javascript
jQuery UI Dialog控件中的表单无法正常提交的解决方法
Dec 19 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
BootStrap select2 动态改变值的方法
Feb 10 Javascript
js/jq仿window文件夹框选操作插件
Mar 08 Javascript
Angularjs自定义指令Directive详解
May 27 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
JavaScript中构造函数与原型链之间的关系详解
Feb 25 Javascript
Vue使用lodop实现打印小结
Jul 06 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
vue 解决provide和inject响应的问题
Nov 12 Javascript
JS实现方向键切换输入框焦点的方法
Aug 19 #Javascript
纯CSS3代码实现滑动开关效果
Aug 19 #Javascript
js实现input框文字动态变换显示效果
Aug 19 #Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 #Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 #Javascript
easyui Droppable组件实现放置特效
Aug 19 #Javascript
js实现简单的联动菜单效果
Aug 19 #Javascript
You might like
PHP生成静态HTML页面最简单方法示例
2015/04/09 PHP
百度工程师讲PHP函数的实现原理及性能分析(三)
2015/05/13 PHP
使用JQ来编写最基本的淡入淡出效果附演示动画
2014/10/31 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
javascript背景时钟实现方法
2015/06/18 Javascript
基于JQuery打造无缝滚动新闻步骤详解
2016/03/31 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
[46:00]Ti4 冒泡赛第二轮LGD vs C9 2
2014/07/14 DOTA
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
python自然语言编码转换模块codecs介绍
2015/04/08 Python
教你学会使用Python正则表达式
2017/09/07 Python
Python用 KNN 进行验证码识别的实现方法
2018/02/06 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
OpenCV 轮廓检测的实现方法
2019/07/03 Python
python 批量修改 labelImg 生成的xml文件的方法
2019/09/09 Python
wxPython实现整点报时
2019/11/18 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python实现获取当前目录下文件名代码详解
2020/03/10 Python
10款最佳Python开发工具推荐,每一款都是神器
2020/10/15 Python
五个2015 年最佳HTML5 框架
2015/11/11 HTML / CSS
美国女性运动零售品牌:Lady Foot Locker
2017/05/12 全球购物
小学生防溺水广播稿
2014/01/12 职场文书
环卫工人先进事迹材料
2014/06/02 职场文书
绿色环保口号
2014/06/12 职场文书
初三英语教学计划
2015/01/23 职场文书
简历自荐信范文
2015/03/09 职场文书
2015年维修电工工作总结
2015/04/25 职场文书
2015年统战工作总结
2015/05/19 职场文书
不同意离婚答辩状
2015/05/22 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
vue elementUI批量上传文件
2022/04/26 Vue.js
关于vue-router-link选择样式设置
2022/04/30 Vue.js