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 window.setTimeout() 的详细用法
Nov 04 Javascript
JavaScript-RegExp对象只能使用一次问题解决方法
Jun 23 Javascript
javascript初学者常用技巧
Sep 02 Javascript
Javascript学习笔记之数组的遍历和 length 属性
Nov 23 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
vue.js表格分页示例
Oct 18 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
gojs实现蚂蚁线动画效果
Feb 18 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
广播爱好者需要了解的天线知识
2021/03/01 无线电
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
二行代码解决全部网页木马
2008/03/28 Javascript
js数组的操作详解
2013/03/27 Javascript
from 表单提交返回值用post或者是get方法实现
2013/08/21 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js判断移动端是否安装某款app的多种方法
2015/12/18 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
微信小程序 window_x64环境搭建
2016/09/30 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
详解React+Koa实现服务端渲染(SSR)
2018/05/23 Javascript
vue递归组件实战之简单树形控件实例代码
2019/08/27 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
Python脚本实现DNSPod DNS动态解析域名
2015/02/14 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python实现批量下载文件
2015/05/17 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python进阶-函数默认参数(详解)
2017/05/18 Python
深入浅析python 中的匿名函数
2018/05/21 Python
pytorch 调整某一维度数据顺序的方法
2018/12/08 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
Html5剪切板功能的实现代码
2018/06/29 HTML / CSS
H5 canvas实现贪吃蛇小游戏
2017/07/28 HTML / CSS
IFCHIC台湾:欧美国际设计师品牌
2019/05/18 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
给男朋友的道歉信
2014/01/12 职场文书
公司开业庆典主持词
2014/03/21 职场文书
学校食品安全实施方案
2014/06/14 职场文书
园林系毕业生求职信
2014/06/23 职场文书
法定授权委托证明书
2014/09/27 职场文书
销售员岗位职责
2015/02/10 职场文书
酒桌上的开场白
2015/06/01 职场文书
昆虫记读书笔记
2015/06/26 职场文书