编程 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 相关文章推荐

js+html5实现canvas绘制圆形图案的方法

Jun 05 Javascript

JS+CSS相对定位实现的下拉菜单

Oct 06 Javascript

深入探讨javascript函数式编程

Oct 11 Javascript

基于jQuery实现歌词滚动版音乐播放器的代码

Sep 17 Javascript

bootstrapValidator.min.js表单验证插件

Feb 09 Javascript

Angular.js跨controller实现参数传递的两种方法

Feb 20 Javascript

简单实现jQuery上传图片显示预览功能

Jun 29 jQuery

JavaScript代码实现txt文件的上传预览功能

Mar 27 Javascript

vue组件的写法汇总

Apr 12 Javascript

js根据json数据中的某一个属性来给数据分组的方法

Oct 08 Javascript

解决Nuxt使用axios跨域问题

Jul 06 Javascript

VUE解决跨域问题Access to XMLHttpRequest at

May 06 Vue.js

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