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 相关文章推荐
IE8 兼容性问题(属性名区分大小写)
Jun 04 Javascript
基于jQuery的简单九宫格实现代码
Aug 09 Javascript
前端开发过程中浏览器版本的两种判定方法
Oct 30 Javascript
禁用JavaScript控制台调试的方法
Mar 07 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
jQuery实现平滑滚动的标签分栏切换效果
Aug 28 Javascript
BootstrapTable refresh 方法使用实例简单介绍
Feb 20 Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
React Native之prop-types进行属性确认详解
Dec 19 Javascript
浅谈Redux中间件的实践
Jul 27 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
解决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
safari下载文件自动加了html后缀问题
2018/11/09 PHP
使用jquery给input和textarea设定ie中的focus
2008/05/29 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
javascript间隔刷新的简单实例
2013/11/14 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
Jquery中map函数的用法
2016/06/03 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
nodejs的HTML分析利器node-jquery用法浅析
2016/11/08 NodeJs
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
javascript表达式和运算符详解
2017/02/07 Javascript
js 作用域和变量详解
2017/02/16 Javascript
详解Angular 4.x Injector
2017/05/04 Javascript
三分钟学会用ES7中的Async/Await进行异步编程
2018/06/14 Javascript
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
浅谈vue3中effect与computed的亲密关系
2019/10/10 Javascript
js实现的订阅发布者模式简单示例
2020/03/14 Javascript
Python及PyCharm下载与安装教程
2017/11/18 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
详解Python使用Plotly绘图工具,绘制甘特图
2019/04/02 Python
python 判断linux进程,并杀死进程的实现方法
2019/07/01 Python
python Pillow图像处理方法汇总
2019/10/16 Python
Python turtle库绘制菱形的3种方式小结
2019/11/23 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python实现石头剪刀布游戏
2021/01/20 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
书法培训心得体会
2014/01/05 职场文书
工作检讨书500字
2014/10/19 职场文书
2015年清明节网上祭英烈留言寄语
2015/03/04 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
OpenCV-Python实现人脸美白算法的实例
2021/06/11 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
CSS link与@import的区别和用法解析
2023/05/07 HTML / CSS