首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JavaScript实现简单计算器

Posted in Javascript onMarch 19, 2020

适合初学者参考的简易计算器，里面没有太多的难以理解的方法，使用的是最基础的JS语法解决式子的运算问题，同时处理了式子中的运算优先级。

实现思路

1、通过绑定点击事件实现待计算式子的输入
2、遍历原式子，读取式子中乘除运算符的位置
3、优先处理乘除取余运算
4、处理加减运算
5、返回结果

代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
 <!-- 计算器 -->
 <style>
    .work2{
      width: 500px;
      margin-top: 50px;
    }
    h2{
      color: #333;
    }
    #work2Article1{
      width: 100%;
      height: 200px;
      background: #cccccc;
      font-size: 20px;
    }
    #work2Article2{
      width: 100%;
      height: 400px;
      background: #cccccc;
    }
    #work2Article2 button{
      width: 24.1%;
      height: 20%;
      color: #333;
      background: #999;
    }
    .work2 button{
      font-size: 20px;
    }
    
  </style>
  <section class="work2">
    <h2>计算器</h2>
    <article id="work2Article1">
  
    </article>
    <article id="work2Article2">
      <button id="work2BtnCle">AC</button>
      <button id="work2BtnDel">×</button>
      <button id="work2BtnRem">%</button>
      <button id="work2BtnDiv">/</button>
      <button id="work2Btn7">7</button>
      <button id="work2Btn8">8</button>
      <button id="work2Btn9">9</button>
      <button id="work2BtnMul">*</button>
      <button id="work2Btn4">4</button>
      <button id="work2Btn5">5</button>
      <button id="work2Btn6">6</button>
      <button id="work2BtnSub">-</button>
      <button id="work2Btn1">1</button>
      <button id="work2Btn2">2</button>
      <button id="work2Btn3">3</button>
      <button id="work2BtnAdd">+</button>
      <button id="work2BtnNull">未开发</button>
      <button id="work2Btn0">0</button>
      <button id="work2BtnPoi">.</button>
      <button id="work2BtnEqu">=</button>
    </article>
  </section>
    
  <script>
    
    var num = "0";         //输入的原式
    var res = 0 ;          //结果

    var work2Article1 = document.getElementById('work2Article1');

    var work2BtnCle = document.getElementById('work2BtnCle');
    var work2BtnDiv = document.getElementById('work2BtnDiv');
    var work2BtnDel = document.getElementById('work2BtnDel');
    var work2BtnRem = document.getElementById('work2BtnRem');
    var work2BtnMul = document.getElementById('work2BtnMul');
    var work2BtnSub = document.getElementById('work2BtnSub');
    var work2BtnAdd = document.getElementById('work2BtnAdd');
    var work2BtnNull = document.getElementById('work2BtnNull');
    var work2BtnPoi = document.getElementById('work2BtnPoi');
    var work2BtnEqu = document.getElementById('work2BtnEqu');
    
    var work2Btn1 = document.getElementById('work2Btn1');
    var work2Btn2 = document.getElementById('work2Btn2');
    var work2Btn3 = document.getElementById('work2Btn3');
    var work2Btn4 = document.getElementById('work2Btn4');
    var work2Btn5 = document.getElementById('work2Btn5');
    var work2Btn6 = document.getElementById('work2Btn6');
    var work2Btn7 = document.getElementById('work2Btn7');
    var work2Btn8 = document.getElementById('work2Btn8');
    var work2Btn9 = document.getElementById('work2Btn9');
    var work2Btn0 = document.getElementById('work2Btn0');
    
    // 初始化
    work2BtnCle.onclick = function () {
      num = "0" ;
      work2Article1.innerText=`${num}`;
    }
   
    work2BtnDel.onclick = function () {
      // 判断原式长度，长度为1时变为0
      if(num.length==1){
        num = '0' ;
        work2Article1.innerText=num;
        // 否则减去最后一位
      }else{
        num = num.substring(0,num.length-1);
        work2Article1.innerText=num;
      }
    }
    // 运算符点击事件
    work2BtnDiv.onclick = function () {
      num += "/" 
      work2Article1.innerText=num;
    }
    work2BtnRem.onclick = function () {
      num += "%" ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnMul.onclick = function () {
      num += "*" ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnAdd.onclick = function () {
      num += "+" ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnNull.onclick = function () {
      alert('下次一定开发出来');
    }
    work2BtnPoi.onclick = function () {
      num += "." ; 
      work2Article1.innerText=`${num}`;
    }
    work2BtnSub.onclick = function () {
      num += "-" ; 
      work2Article1.innerText=`${num}`;
    }
   
    // 数字点击事件
    work2Btn1.onclick =function(){
      if( num == "0" ){
        num = "1";
      }else{
        num += "1" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn2.onclick =function(){
      if( num == "0" ){
        num = "2";
      }else{
        num += "2" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn3.onclick =function(){
      if( num == "0" ){
        num = "3";
      }else{
        num += "3" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn4.onclick =function(){
      if( num == "0" ){
        num = "4";
      }else{
        num += "4" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn5.onclick =function(){
      if( num == "0" ){
        num = "5";
      }else{
        num += "5" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn6.onclick =function(){
      if( num == "0" ){
        num = "6";
      }else{
        num += "6" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn7.onclick =function(){
      if( num == "0" ){
        num = "7";
      }else{
        num += "7" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn8.onclick =function(){
      if( num == "0" ){
        num = "8";
      }else{
        num += "8" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn9.onclick =function(){
      if( num == "0" ){
        num = "9";
      }else{
        num += "9" ;
      }
      work2Article1.innerText=`${num}`;
    }
    work2Btn0.onclick =function(){
      if( num == "0" ){
        num = "0";
      }else{
        num += "0" ;
      }
      work2Article1.innerText=`${num}`;
    }
  
  
    work2BtnEqu.onclick = function () {
      // num = Number(num);


      //检测运算符号的位置 
      function obtainSymbol(){
        var num1 = [];
        var o = 0 ;
        for(var i = 0 ; i<=num.length ; i++){
          if(num.charAt(i)=='+'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='-'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='*'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='/'){
            num1[o] = i ;
            o++;
          }else if(num.charAt(i)=='%'){
            num1[o] = i ;
            o++;
          }
        }
        return num1 ;
      }

      var res1 = 0 ;     //计算结果
      var numStar = num ;  //重新获取原式子
      // 检测乘除取余运算
      var num1 = obtainSymbol();
      console.log(num1);

      // 检测除了第一个符号之外的乘除取余运算
      for( var w = 0 ; w <= num1.length ; w++ ){
        if(w != 0){
          if( num.charAt(num1[w]) == '*' || num.charAt(num1[w]) == '/' || num.charAt(num1[w]) == '%' ){
            if(w != num1.length-1){
              switch(num.charAt(num1[w])){
              case '*': var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ;
                  console.log(l);
                  num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; 
                  break;
              case '/': var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ;
                  num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break;
              case '%': var l =Number(num.substring(num1[w-1],num1[w]))*Number(num.substring(num1[w]+1,num1[w+1])) ;
                  num = num.substring(0,num1[w-1]+1) + l + num.substring(num1[w+1]) ; break;
              }
            }else if(w == num1.length-1 ){
              switch(num.charAt(num1[w])){
              case '*': var l =Number(num.substring(num1[w-1]+1,num1[w])) * Number(num.substring(num1[w]+1)) ;
                  num = num.substring(0,num1[w-1]+1) + l ;
                  break;
              case '/': var l =Number(num.substring(num1[w-1]+1,num1[w])) / Number(num.substring(num1[w]+1)) ;
                  num = num.substring(0,num1[w-1]+1) + l ; break;
              case '%': var l =Number(num.substring(num1[w-1]+1,num1[w])) % Number(num.substring(num1[w]+1)) ;
                  num = num.substring(0,num1[w-1]+1) + l; break;
              }
            }
          num1 = 0 ;
          num1 = obtainSymbol();
          w -= 1;
          }
        }
      }
      
      // 从第一位运算符开始运算
      for(var k = 0 ; k < num1.length ; k++){
        if(k==0){        
          switch(num.charAt(num1[k])){
            case '+': res1 += Number(num.substring(0,num1[k])) + Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '-': res1 += Number(num.substring(0,num1[k])) - Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '*': res1 += Number(num.substring(0,num1[k])) * Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '/': res1 += Number(num.substring(0,num1[k])) / Number(num.substring(num1[k]+1,num1[k+1])) ; break;
            case '%': res1 += Number(num.substring(0,num1[k])) % Number(num.substring(num1[k]+1,num1[k+1])) ; break; 
          }
        }else{
          switch(num.charAt(num1[k])){
            case '+': 
              if(k==num1.length-1){
              res1 += Number(num.substring(num1[k]+1)) ;
            
              }else{
                res1 += Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '-': 
              if(k==num1.length-1){
              res1 -= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 -= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '*': 
              if(k==num1.length-1){
              res1 *= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 *= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '/': 
              if(k==num1.length-1){
              res1 /= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 /= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
            case '%': 
              if(k==num1.length-1){
              res1 %= Number(num.substring(num1[k]+1)) ;
              }else{
                res1 %= Number(num.substring(num1[k]+1,num1[k+1])); 
              }break;
          }
          
        } 
      }
  
      work2Article1.innerText=`${numStar}=${res1}`;
    }
  </script>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

JavaScript实现简单计算器

- Author -

皮卡皮卡?

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript特殊用法示例介绍
Nov 29 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
Jul 09 Javascript
JavaScript中this详解
Sep 01 Javascript
jQuery实现手机自定义弹出输入框
Jun 13 Javascript
JS控制层作圆周运动的方法
Jun 20 Javascript
基于JavaScript实现的快速排序算法分析
Apr 14 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
node(koa2) web应用模块介绍详解
Mar 29 Javascript
详解Element-UI中上传的文件前端处理
Aug 07 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
Sep 11 Javascript
layui监听单元格编辑前后交互的例子
Sep 16 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 #jQuery
webpack 动态批量加载文件的实现方法
Mar 19 #Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 #Javascript
js实现经典贪吃蛇小游戏
Mar 19 #Javascript
javascrpt密码强度校验函数详解
Mar 18 #Javascript
Node.js Domain 模块实例详解
Mar 18 #Javascript
js判断密码强度的方法
Mar 18 #Javascript
九宫格(5) REGEXP(1) Simhash(1) Hadoop(1) 控制流(1) 字段分割(1) RecyclerView(1) TaiShan(1) queue(1) 内存池(1)
You might like
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
基于php实现的验证码小程序
2016/12/13 PHP
三个思路解决laravel上传文件报错：413 Request Entity Too Large问题
2017/11/13 PHP
PHP实现正则匹配所有括号中的内容
2018/06/22 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
用脚本调用样式的几种方法
2006/12/09 Javascript
js实现网页多级级联菜单代码
2015/08/20 Javascript
JavaScript中的函数（二）
2015/12/23 Javascript
第六章之辅组类与响应式工具
2016/04/25 Javascript
jQuery获取radio选中项的值实例
2016/06/18 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
基于JavaScript实现验证码功能
2017/04/01 Javascript
win系统下nodejs环境安装配置
2017/05/04 NodeJs
Bootstrap 模态对话框只加载一次 remote 数据的完美解决办法
2017/07/09 Javascript
jQuery插件artDialog.js使用与关闭方法示例
2017/10/09 jQuery
vue项目中v-model父子组件通信的实现详解
2017/12/10 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
使用python实现学生信息管理系统
2021/02/25 Python
介绍一下Python中webbrowser的用法
2013/05/07 面试题
销售员自我评价怎么写
2013/09/19 职场文书
团员的自我评价
2013/12/01 职场文书
平安工地建设方案
2014/05/06 职场文书
党的群众路线教育实践活动个人承诺书
2014/05/22 职场文书
欢迎标语大全
2014/06/21 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
小学家长通知书评语
2014/12/31 职场文书
药品销售内勤岗位职责
2015/04/13 职场文书
欠款起诉书范文
2015/05/19 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python