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 相关文章推荐
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
jQuery总体架构的理解分析
Mar 07 Javascript
JavaScript的事件绑定(方便不支持js的时候)
Oct 01 Javascript
javascript中interval与setTimeOut的区别示例介绍
Mar 14 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
Angularjs中使用Filters详解
Mar 11 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
JS实现的透明度渐变动画效果示例
Apr 28 Javascript
运用js实现图层拖拽的功能
May 24 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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读取excel文件示例分享(更新修改excel)
2014/02/27 PHP
yii2安装详细流程
2018/05/23 PHP
PHP中如何使用Redis接管文件存储Session详解
2018/11/28 PHP
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
对javascript的一点点认识总结《javascript高级程序设计》读书笔记
2011/11/30 Javascript
js使用ajax读博客rss示例
2014/05/06 Javascript
jquery实现图片按比例缩放示例
2014/07/01 Javascript
javascript实现检验的各种规则
2015/07/31 Javascript
JavaScript重载函数实例剖析
2016/05/13 Javascript
JS实现星星评分功能实例代码(两种方法)
2016/06/09 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
详解自动生成博客目录案例
2016/12/09 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
Vue.use源码分析
2017/04/22 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
vuex 项目结构目录及一些简单配置介绍
2018/04/08 Javascript
Vue 中使用 CSS Modules优雅方法
2018/04/09 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
Django网络框架之HelloDjango项目创建教程
2019/06/06 Python
Python openpyxl模块原理及用法解析
2020/01/19 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
总结Pyinstaller的坑及终极解决方法(小结)
2020/09/21 Python
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
FORZIERI福喜利中国官网:奢侈品购物梦工厂
2019/05/03 全球购物
新西兰购物网站:TheMarket NZ
2020/09/19 全球购物
企业宣传标语
2014/06/09 职场文书
简易离婚协议书(范本)
2014/10/25 职场文书
暑期实践个人总结
2015/03/06 职场文书
男生贾里读书笔记
2015/06/30 职场文书
文明上网主题班会
2015/08/14 职场文书
小学体育课教学反思
2016/02/16 职场文书
Java新手教程之ArrayList的基本使用
2021/06/20 Java/Android
Apache POI的基本使用详解
2021/11/07 Servers
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python