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 变量作用域 代码分析
Jun 26 Javascript
单独使用CKFinder选择图片的方法
Aug 21 Javascript
Dom 是什么的详细说明
Oct 25 Javascript
火狐4、谷歌12不支持Jquery Validator的解决方法分享
Jun 20 Javascript
用Jquery重写windows.alert方法实现思路
Apr 03 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
Oct 11 Javascript
JS获取select-option-text_value的方法
Dec 26 Javascript
js代码实现无缝滚动(文字和图片)
Aug 20 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
基于javascript实现的快速排序
Dec 02 Javascript
ES6/JavaScript使用技巧分享
Dec 14 Javascript
实现vuex原理的示例
Oct 21 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
关于二级目录拖拽排序的实现(源码示例下载)
2013/04/26 PHP
6种php上传图片重命名的方法实例
2013/11/04 PHP
PHP之十六个魔术方法详细介绍
2016/11/01 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
JSON JQUERY模板实现说明
2010/07/03 Javascript
js实现翻页后保持checkbox选中状态的实现方法
2012/11/03 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
js动态设置鼠标事件示例代码
2013/10/30 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
js获取鼠标点击的位置实现思路及代码
2014/05/09 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery插件expander实现图片翻转特效
2015/05/21 Javascript
javascript表单事件处理方法详解
2016/05/15 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
js实现移动端编辑添加地址【模仿京东】
2017/04/28 Javascript
bootstrap模态框远程示例代码分享
2017/05/22 Javascript
基于ES6 Array.of的用法(实例讲解)
2017/09/05 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
vue父子组件通信的高级用法示例
2019/08/29 Javascript
Python+Pika+RabbitMQ环境部署及实现工作队列的实例教程
2016/06/29 Python
Django admin美化插件suit使用示例
2017/12/12 Python
python实现数据写入excel表格
2018/03/25 Python
Windows 安装 Anaconda3+PyCharm的方法步骤
2019/06/13 Python
PyQT5 emit 和 connect的用法详解
2019/12/13 Python
HTML5+CSS3 诱人的实例:3D立方体旋转动画实例
2016/12/30 HTML / CSS
html5 Canvas实现图片旋转的示例
2018/01/15 HTML / CSS
Eastbay官网:美国最大的运动鞋网络零售商
2016/07/27 全球购物
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
马来西亚网上购物:Youbeli
2018/03/30 全球购物
巴西服装和鞋子购物网站:Marisa
2018/10/25 全球购物
项目计划书范文
2014/01/09 职场文书
春游踏青活动方案
2014/08/14 职场文书
2014年酒店前台工作总结
2014/11/14 职场文书
队名及霸气口号大全
2015/12/25 职场文书
《平移和旋转》教学反思
2016/02/19 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android