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

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-math-input-method-codes/

具体代码如下：

<!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程序设计有所帮助。

赞 (0)

相关推荐

  • js实现网页的两个input标签内的数值加减(示例代码)

    js实现网页的两个input标签内的数值加减(示例代码)

    实例如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function(){ var oIput1=document.getElementById('put1'); var oIput2=document.getElementById('put2'); var

  • javascript实现一个数值加法函数

    废话不多说,直接奉上代码 JS <script type="text/javascript"> function Sum(arg1,arg2){ //数值加法函数 var sarg1 = new String(arg1); //将传入的参数转为字符串以便进行参数检查 var sarg2 = new String(arg2); //将参数2转为字符类型 if( (sarg1=="")||(sarg2=="") ) //确保参数不为空 {

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

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

    本文实例讲述了js实现文本框支持加减运算的方法.分享给大家供大家参考.具体如下: 这是一个网页表单效果,让表单内的文本框支持加减运算,不过你要按正确的运算式输入,要不然它没有那么智能哦,比如输入1+5,文本框旁边会显示计算结果,这要归功于JavaScript的功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-math-input-method-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3

  • ThinkPHP自定义函数解决模板标签加减运算的方法

    本文实例讲述了ThinkPHP自定义函数解决模板标签加减运算的方法.分享给大家供大家参考.具体如下: 实际项目中,我们经常需要标签变量加减运算的操作.但是,在ThinkPHP中,并不支持模板变量直接运算的操作. 幸运的是,它提供了自定义函数的方法,我们可以利用自定义函数解决: ThinkPHP模板自定义函数语法如下: 格式:{:function(-)} (参考官方帮助文档:http://thinkphp.cn/Manual/196) 利用这个,我们来试做加法和减法. 一.在ThinkPHP中定义

  • Vue入门之数量加减运算操作示例

    Vue入门之数量加减运算操作示例

    本文实例讲述了Vue入门之数量加减运算操作.分享给大家供大家参考,具体如下: 效果图: HTML: <div class="count3"> <ul> <li v-for="(key,idx) in liList" :key="key.id"> {{key.id}},{{idx}} <template> <button class="cut" @click="cu

  • PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算示例【基于strtotime】

    本文实例讲述了PHP实现针对日期,月数,天数,周数,小时,分,秒等的加减运算方法.分享给大家供大家参考,具体如下: 其实就是strtotime这个内置函数 //PHP 日期 加减 周 date("Y-m-d",strtotime("2013-11-12 +1 week")) //PHP 日期 加减 天数 date("Y-m-d",strtotime("2013-11-12 12:12:12 +1 day")) //PHP 日期

  • C语言实现大整数加减运算详解

    前言 我们知道,在数学中,数值的大小是没有上限的,但是在计算机中,由于字长的限制,计算机所能表示的范围是有限的,当我们对比较小的数进行运算时,如:1234+5678,这样的数值并没有超出计算机的表示范围,所以可以运算.但是当我们在实际的应用中进行大量的数据处理时,会发现参与运算的数往往超过计算机的基本数据类型的表示范围,比如说,在天文学上,如果一个星球距离我们为100万光年,那么我们将其化简为公里,或者是米的时候,我们会发现这是一个很大的数.这样计算机将无法对其进行直接计算. 可能我们认为实际应

  • C语言中指针的加减运算方法示例

    C语言中指针的加减运算方法示例

    参考文章,值得一看 char arr[3]; printf("arr:\n%d\n%d\n%d\n", arr, arr + 1, arr + 2); char *parr[3]; printf("parr:\n%d\n%d\n%d\n", parr, parr + 1, parr + 2); 从结果可以看到,字符数组每个元素占1字节,字符指针数组每个占4字节. 再看一个例子: char a = 'a', b = 'b', c = 'c', d = 'd'; cha

  • js实现购物车商品数量加减

    本文实例为大家分享了js实现购物车商品数量加减的具体代码,供大家参考,具体内容如下 Html <link rel='stylesheet' type='text/css' media='screen' href='../css/bootstrap.min.css'> <script src="../js/jquery-1.12.4.js"></script> <div style="width: 300px;margin: 30px

  • Java利用位运算实现加减运算详解

    目录 前言 思路分析 示例 位运算进位 初步结果 去除加号 整体思路 加法代码实现 减法实现 减法分析 减法代码实现 总结 前言 本文主要介绍如何使用位运算来实现加减功能,也就是在整个运算过程中不能出现加减符号. 加减乘除运算在计算机中,实际上都是用位运算实现的,今天就用位运算来模拟下加法和减法的运算功能. 思路分析 先分析如何用位运算实现加法运算. 示例 假设a=23,b=36,使用位运算实现加法得到结果59. 首先来看下23.36.59的二进制信息. 从上面的图中可以看到,两个数相加的结果与

  • 使用MYSQL TIMESTAMP字段进行时间加减运算问题

    目录 MYSQL TIMESTAMP字段进行时间加减运算 计算公式如下 DATETIME 与 TIMESTAMP的区别 结论 参考文档 MYSQL TIMESTAMP字段进行时间加减运算 在数据分析过程中,想当然地对TIMESTAMP字段进行运算,导致结果谬之千里 计算公式如下 -- create_time与week_time的声明都是TIMESTAMP(), 要求精确到分钟 -- SELECT (sa.create_time - sa.week_time)/(1000 * 60) from a

  • js简单判断flash是否加载完成的方法

    本文实例讲述了js简单判断flash是否加载完成的方法.分享给大家供大家参考,具体如下: <script type="text/javascript"> //判定是否加载成功 function checkLoaded(flash){ try{ return Math.floor(flash.PercentLoaded()) == 100 }catch(e){ return false; } } var flash = 'flash对象'; var intervalID =

随机推荐