Question

我正在建造一个计算器。我使数字，清除和操作员功能工作，但我无法弄清楚如何使计算器的功能相同。我想将所有add（），multiply（），divide（）和subtract（）函数传递给一个相等的函数。

这是我的代码：

$(document).ready(function() {

  var add = function(a, b) {
    a = parseInt(a);
    b = parseInt(b);
    return a + b;
  }

  var subtract = function(a, b) {
    return a - b;
  }

  var multiply = function(a, b) {
    return a * b;
  }

  var divide = function(a, b) {
    return a / b;
  }

  var userInput = []; //initial user input
  var arrNum = []; //will hold push parsed input
  var operation = "";

  $('.number').click(function() {
    var v = $(this).val();
    $('.screen').val($('.screen').val() + v);

  });

  $('.operator').click(function() {
    operation = $(this).val();
    var v = $(this).val();
    $('.screen').val($('.screen').val() + v);
  });

  $('.clear').click(function() {
    $('.screen').val('');
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" class="screen" id="display" readonly />
<br>
<br>
<button href="#" type="button" class="number" value="1">1</button>
<button href="#" type="button" class="number" value="2">2</button>
<button href="#" type="button" class="number" value="3">3</button>
<button href="#" type="button" class="operator add" value="+">+</button>

<br>
<button href="#" type="button" class="number" value="4">4</button>
<button href="#" type="button" class="number" value="5">5</button>
<button href="#" type="button" class="number" value="6">6</button>
<button href="#" type="button" class="operator multi" value="x">x</button>

<br>
<button href="#" type="button" class="number" value="7">7</button>
<button href="#" type="button" class="number" value="8">8</button>
<button href="#" type="button" class="number" value="9">9</button>
<button href="#" type="button" class="operator minus" value="-">-</button>

<br>

<button href="#" type="button" class="number" value="0">0</button>
<button href="#" type="button" class="clear" value="C">C</button>
<button type="button" class="equal" value="=">=</button>
<button href="#" type="button" class="operator divide" value="/">/</button>

Answer 1

解析输入以将其拆分为由运算符分隔的两个数字。然后使用一个将运算符映射到要调用的函数的对象。

当正则表达式匹配时，我们可以使用捕获组来获取运算符和两个参数。然后我们可以在对象中查找相应的函数，并使用这些参数调用它。

＆＃13;

$(document).ready(function() {

  var add = function(a, b) {
    a = parseInt(a);
    b = parseInt(b);
    return a + b;
  }

  var subtract = function(a, b) {
    return a - b;
  }

  var multiply = function(a, b) {
    return a * b;
  }

  var divide = function(a, b) {
    return a / b;
  }
  
  var ops = {
    '+': add,
    '-': subtract,
    'x': multiply,
    '/': divide
  };

  var userInput = []; //initial user input
  var arrNum = []; //will hold push parsed input
  var operation = "";

  $('.equal').click(function() {
    var input = $('.screen').val();
    var parts = input.match(/^(\d+)(\D)(\d+)/);
    if (parts) {
      var op = parts[2];
      var func = ops[op];
      var param1 = parts[1];
      var param2 = parts[3];
      var result = func(param1, param2);
      $('.screen').val(Math.round(result));
    }
  });

  $('.number').click(function() {
    var v = $(this).val();
    $('.screen').val($('.screen').val() + v);

  });

  $('.operator').click(function() {
    operation = $(this).val();
    var v = $(this).val();
    $('.screen').val($('.screen').val() + v);
  });

  $('.clear').click(function() {
    $('.screen').val('');
  });
  
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input type="text" class="screen" id="display" readonly />
<br>
<br>
<button href="#" type="button" class="number" value="1">1</button>
<button href="#" type="button" class="number" value="2">2</button>
<button href="#" type="button" class="number" value="3">3</button>
<button href="#" type="button" class="operator add" value="+">+</button>

<br>
<button href="#" type="button" class="number" value="4">4</button>
<button href="#" type="button" class="number" value="5">5</button>
<button href="#" type="button" class="number" value="6">6</button>
<button href="#" type="button" class="operator multi" value="x">x</button>

<br>
<button href="#" type="button" class="number" value="7">7</button>
<button href="#" type="button" class="number" value="8">8</button>
<button href="#" type="button" class="number" value="9">9</button>
<button href="#" type="button" class="operator minus" value="-">-</button>

<br>

<button href="#" type="button" class="number" value="0">0</button>
<button href="#" type="button" class="clear" value="C">C</button>
<button type="button" class="equal" value="=">=</button>
<button href="#" type="button" class="operator divide" value="/">/</button>

＆＃13;

Answer 2

您是否尝试过使用eval方法来评估传递的值 Here is a link to the eval docs on mozilla

Answer 3

首先，将乘法符号从x更改为*，然后使用eval：

$('.equal').click(function() {
    alert(eval($('.screen').val()));
});

计算器的功能相同

3 个答案: