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 相关文章推荐
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
jquery中的查找parents与closest方法之间的区别
Dec 02 Javascript
JS实现的网页倒计时数字时钟效果
Mar 02 Javascript
原生javascript实现匀速运动动画效果
Feb 26 Javascript
Javascript中Date类型和Math类型详解
Feb 27 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
微信通过页面(H5)直接打开本地app的解决方法
Sep 09 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
了解JavaScript中的选择器
May 24 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
layui 实现表格某一列显示图标
Sep 19 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中常用数组处理方法实例分析
2008/08/30 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
jquery简单体验
2007/01/10 Javascript
js文字滚动停顿效果代码
2008/06/28 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
2016/09/18 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
jQuery移除或禁用html元素点击事件常用方法小结
2017/02/10 Javascript
Ionic3 UI组件之Gallery Modal详解
2017/06/07 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
2018/08/09 Javascript
vue项目中使用lib-flexible解决移动端适配的问题解决
2018/08/23 Javascript
详解webpack打包第三方类库的正确姿势
2018/10/20 Javascript
微信小程序连续签到7天积分获得功能的示例代码
2020/08/20 Javascript
[03:52]DOTA2英雄基础教程 酒仙
2013/12/23 DOTA
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
深入理解Python中的内置常量
2017/05/20 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
Pycharm在创建py文件时,自动添加文件头注释的实例
2018/05/07 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
PYQT5设置textEdit自动滚屏的方法
2019/06/14 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
HTML5地理定位实例
2014/10/15 HTML / CSS
Willer台湾:日本高速巴士/夜行巴士预约
2017/07/09 全球购物
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
幼儿园教师节活动方案
2014/02/02 职场文书
团结演讲稿范文
2014/05/23 职场文书
建筑横幅标语
2014/10/09 职场文书
作风建设年活动实施方案
2014/10/24 职场文书
员工升职自荐信
2015/03/27 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
导游词之日月潭
2019/11/05 职场文书
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
浅谈为什么我的 z-index 又不生效了
2022/07/15 HTML / CSS