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 相关文章推荐
js加解密 脚本解密
Feb 22 Javascript
javascript中callee与caller的用法和应用场景
Dec 08 Javascript
javascript常用方法汇总
Dec 02 Javascript
JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)
Jan 13 Javascript
js输入框使用正则表达式校验输入内容的实例
Feb 12 Javascript
JavaScript实现按键精灵的原理分析
Feb 21 Javascript
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
微信小程序利用云函数获取手机号码
Dec 17 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
关于element的表单组件整理笔记
Feb 05 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实现利用phpexcel导出数据
2013/08/24 PHP
php递归删除目录下的文件但保留的实例分享
2014/05/10 PHP
typecho插件编写教程(一):Hello World
2015/05/28 PHP
PHP会话控制实例分析
2016/12/24 PHP
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
2010/10/15 Javascript
通过length属性判断jquery对象是否存在
2013/10/18 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
详解Javascript中prototype属性(推荐)
2016/09/03 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
2017/05/09 Javascript
js图片放大镜实例讲解(必看篇)
2017/07/17 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
js实现验证码干扰(静态)
2021/02/22 Javascript
探究python中open函数的使用
2016/03/01 Python
python基础教程之匿名函数lambda
2017/01/17 Python
使用python实现knn算法
2017/12/20 Python
python去除扩展名的实例讲解
2018/04/23 Python
Python 读取某个目录下所有的文件实例
2018/06/23 Python
python实现复制大量文件功能
2019/08/31 Python
python 实现dict转json并保存文件
2019/12/05 Python
pytorch 实现张量tensor,图片,CPU,GPU,数组等的转换
2020/01/13 Python
python数据预处理 :数据抽样解析
2020/02/24 Python
关于PySnooper 永远不要使用print进行调试的问题
2021/03/04 Python
html+css3实现的登录界面
2020/12/09 HTML / CSS
工地资料员岗位职责
2013/12/31 职场文书
学习党的群众路线教育实践活动心得体会
2014/03/01 职场文书
教师节活动总结
2014/08/29 职场文书
节约每一滴水演讲稿
2014/09/09 职场文书
钱塘江大潮导游词
2015/02/03 职场文书
初中生物教学反思
2016/02/20 职场文书
小学2016年第十八届推普周活动总结
2016/04/05 职场文书
感谢信的技巧及范例
2019/05/15 职场文书
开机音效回归! Windows 11重新引入开机铃声
2021/11/21 数码科技