JS实现可针对算术表达式求值的计算器功能示例


Posted in Javascript onSeptember 04, 2018

本文实例讲述了JS实现可针对算术表达式求值的计算器功能。分享给大家供大家参考,具体如下:

HTML部分:

<div>
 <div id="in">
  <input name="in" type="text"  class="clsin" id="input" value="" readonly="readonly" />
  <input type="button" name="=" value="=" onClick="exp_result()"/>
 </div>
 <div id="num">
 <input type="button" name="seven" value="7" onClick="test(this);"/>
 <input type="button" name="8" value="8" onClick="test(this);"/>
 <input type="button" name="9" value="9" onClick="test(this)"/>
 <input type="button" name="/" value="/" onClick="test(this)"/>
 <!--span id="showValue"></span-->
 <br />
 <input type="button" name="4" value="4" onClick="test(this)"/>
 <input type="button" name="5" value="5" onClick="test(this)" />
 <input type="button" name="6" value="6" onClick="test(this)"/>
  <input type="button" name="*" value="*" onClick="test(this)"/>
 <br />
 <input type="button" name="1" value="1" onClick="test(this);"/>
 <input type="button" name="2" value="2" onClick="test(this);"/>
 <input type="button" name="3" value="3" onClick="test(this);"/>
  <input type="button" name="-" value="-" onClick="test(this);"/>
 <br />
 <input type="button" name="0" value="0"   onClick="test(this);"/>
 <input type="button" name="+/-" value="("  onClick="test(this);"/>
 <input type="button" name="." value=")"   onClick="test(this);"/>
 <input type="button" name="+" value="+"   onClick="test(this);"/>
 </div>
</div>

CSS部分:

/* CSS Document */
body
{
 /*  padding-right:40%;
   padding-left:40%;*/
   text-align:center;
}
div{
  background-color:orange;
  height:300px;
  width:300px;
  margin-left:auto;
  margin-right:auto;
  margin-bottom:auto;
  margin-top:50px;
  border-style: groove;
  border-color: Green;
/*  margin-top:auto;*/
}
#in{
    position:relative;
    margin-left:20px;
    margin-top:10px;
    height:27px;
    width:260px;
    background:red;
    top:40px
  }
.clsin
  {
    height:27px;
    width:200px;
    background-color:#FFF;
  }
#num{
    position:relative;
    margin-left:20px;
    margin-top:45px;
    height:150px;
    width:250px;
    background-color:green;
    text-align:left;
  }
#num input
  {
    margin-right:10px;
    margin-top:10px;
    width:35px;
  }

js部分:

str_exp=""; //存放表达式
function test(obj)   //数字 运算符 btn  click
{
    str_exp+=obj.value;
    document.getElementById("input").value=str_exp;
}
function compare( ch1, ch2)         //比较运算符ch1和ch2优先级
{
  array1=new Array('+','-','*','/','(',')','@');
  array20=new Array('>','>','<','<','<','>', '>');
  array21=new Array( '>','>','<','<','<','>','>');
  array22=new Array( '>','>','>','>','<','>','>');
  array23=new Array('>','>','>','>','<','>','>');
  array24=new Array('<','<','<','<','<','=',' ');
  array25=new Array('>','>','>','>',' ','>','>');
  array26=new Array( '<','<','<','<','<',' ','=');
  array2=new Array(array20,array21,array22,array23,array24,array25,array26);
//  b[7][7]={'>','>','<','<','<','>','>',  // +
//        '>','>','<','<','<','>','>',   // -
//        '>','>','>','>','<','>','>',   // *
//        '>','>','>','>','<','>','>',   // /
//        '<','<','<','<','<','=',' ',   // (
//         '>','>','>','>',' ','>','>',  // )
//         '<','<','<','<','<',' ','=' }; // @
  for(var i=0;ch1!=array1[i];i++);
  for(var j=0;ch2!=array1[j];j++);
  return array2[i][j];
}
function operate(a,preop,b)  //计算a?b的值
{
 // var num1=parseInt(a,10);
 // var num2=parseInt(b,10);
  var num1=parseFloat(a);
  var num2=parseFloat(b);
//  alert("a:"+num1+preop+"b:"+num2);
  switch(preop)
  {
  case'+':return(num1+num2);break;
  case'-':return(num1-num2);break;
  case'*':return(num1*num2);break;
  case'/':return(num1/num2);break;
//  default: cout<<"erro"<<endl;return 0;
  }
}
function isNum( ch)                //判断读取ch是否为操作数
{
  if(ch=='+'||ch=='-'||ch=='*'||ch=='/'||ch=='('||ch==')'||ch=='@')
    return 0;
  else
    return 1;
}
function extend(str)    //将开始一定情况下‘-'转换为'(0-1)*',从而支持负数
{
   var str1=new Array();
   if(str.charAt(0)=='-')
   {
     str1+="(0-1)*";
   }
   else
   {
    str1+=str.charAt(0);
   }
   for(var i=1;i<str.length;i++)
   {
     if(str.charAt(i)=='-'&&str.charAt(i-1)=='(')
     {
      str1+="(0-1)*";
     }
     else
     str1+=str.charAt(i);
   }
   return str1;
}
function divided(str)  //分离表达式中操作数与操作符存放到返回值中
{
 var str2=extend(str);
// alert(str2);
 var str_temp=new Array();
 var j=0;
 var expTemp;
 var expPre;
 for(var i=0;i<str2.length;i++)
 {
  // alert(str2.charAt(i));
   expTemp="";
   expTemp=str2.charAt(i);
   if(i==0)
   str_temp[0]=expTemp;
   if(i>0)
   {
   expPre=str2.charAt(i-1); ///////////////////////!!
   if(isNum(expTemp)&&isNum(expPre))  //判断前后连续取到的是否都是数字字符,是则拼接
   {
    str_temp[j-1]+=expTemp;
    j--;
   }
    else
    {
     str_temp[j]=expTemp;
    }
   }
   j++;
 }
 return str_temp;
}
function exp_result()
{
  str_exp=str_exp+'@';
  str=divided(str_exp);
  numArray=new Array();  //存放操作数
  symbolArray =new Array();//存放操作符
  symbolArray.push('@');
 //  numArray.push('@');
// alert(str.length);
  for(var i=0;str[i]!='@'||symbolArray[symbolArray.length-1]!='@';i++)
  {
//    alert(str[i]);
//    alert(symbolArray[symbolArray.length-1]);
    if(isNum(str[i]))
    {
 //     alert("Num push:"+str[i]);
     numArray.push(str[i]);
    }
    else
    {
 //    alert("symbol:"+str[i]);
    preop=symbolArray[symbolArray.length-1];  //取栈顶元素
    switch(compare(preop,str[i]))
    {
      case'<':symbolArray.push(str[i]);break;
      case'=':symbolArray.pop();break;
      case'>':b=numArray.pop();a=numArray.pop();preop=symbolArray.pop(); //取两操作数与之前操作符运算
          numArray.push(operate(a,preop,b)); //计算结果入栈
         // str.push(str[i]); //当前操作符入栈
          i--;   //继续与之前的操作符比较
          break;
    }
    }
  }
  if(isNaN(numArray[0]))
  {
   alert("算术表达式输入有误!!");
  }
  else
  alert("结果为:"+numArray[0]);
  str_exp="";
  document.getElementById("input").value=str_exp;
}

运行效果如下图所示:

JS实现可针对算术表达式求值的计算器功能示例

JS实现可针对算术表达式求值的计算器功能示例

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

Javascript 相关文章推荐
EasyUi datagrid 实现表格分页
Feb 10 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
Jun 20 Javascript
Vue学习之路之登录注册实例代码
Jul 06 Javascript
利用node.js实现自动生成前端项目组件的方法详解
Jul 12 Javascript
vue加载完成后的回调函数方法
Sep 07 Javascript
js实现网页同时进行多个倒计时功能
Feb 25 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
Sep 16 Javascript
Vue 中获取当前时间并实时刷新的实现代码
May 12 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 Javascript
ES6中的类(Class)示例详解
Dec 09 Javascript
Javascript实现关闭广告效果
Jan 29 Javascript
解决vue 打包发布去#和页面空白的问题
Sep 04 #Javascript
详解JS中统计函数执行次数与执行时间
Sep 04 #Javascript
Vue组件中的data必须是一个function的原因浅析
Sep 03 #Javascript
ES6中let 和 const 的新特性
Sep 03 #Javascript
Angular项目如何升级至Angular6步骤全纪录
Sep 03 #Javascript
vue 中滚动条始终定位在底部的方法
Sep 03 #Javascript
前后端如何实现登录token拦截校验详解
Sep 03 #Javascript
You might like
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
PHP获取youku视频真实flv文件地址的方法
2014/12/23 PHP
PHP 实现判断用户是否手机访问
2015/01/21 PHP
开启PHP的伪静态模式
2015/12/31 PHP
js 创建快捷方式的代码(fso)
2010/11/19 Javascript
jquery操作select option 的代码小结
2011/06/21 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
Javascript中浏览器窗口的基本操作总结
2016/08/18 Javascript
ES6(ECMAScript 6)新特性之模板字符串用法分析
2017/04/01 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
2017/08/23 Javascript
Vue DevTools调试工具的使用
2017/12/05 Javascript
Node.js使用supervisor进行开发中调试的方法
2019/03/26 Javascript
js实现图片上传到服务器和回显
2020/01/19 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
2020/09/04 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
python 实现归并排序算法
2012/06/05 Python
使用python检测主机存活端口及检查存活主机
2015/10/12 Python
Python对列表中的各项进行关联详解
2017/08/15 Python
推荐10款最受Python开发者欢迎的Python IDE
2018/09/16 Python
解决python selenium3启动不了firefox的问题
2018/10/13 Python
python实现一组典型数据格式转换
2018/12/15 Python
python2 中 unicode 和 str 之间的转换及与python3 str 的区别
2019/07/25 Python
python识别验证码图片实例详解
2020/02/17 Python
行政管理专业推荐信
2013/11/02 职场文书
宿舍违规检讨书
2014/01/12 职场文书
餐厅楼面部长岗位职责范文
2014/02/16 职场文书
国际贸易毕业生求职信范文
2014/02/21 职场文书
梅花魂教学反思
2014/04/25 职场文书
考察现实表现材料
2014/05/19 职场文书
2014年教师政治学习材料
2014/06/02 职场文书
企业法人代表任命书
2014/06/06 职场文书
二审答辩状格式
2015/05/22 职场文书
2015年度酒店客房部工作总结
2015/05/25 职场文书
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL