javascript计算器_如何使用JavaScript构建计算器

weixin_26750481

于 2020-09-14 09:06:21 发布

阅读量271

点赞数

文章标签： javascript ViewUI

原文链接：https://medium.com/@javitocor/how-to-build-a-calculator-with-javascript-fa6be03a0789

版权

javascript计算器

Basic calculator using JS

使用JS的基本计算器

One interesting project I had to build in my very early experience with JavaScript was a basic calculator. It was a bit challenging due that I was a newbie with this language, but I like challenges so I started to think a little and this is what came out…

我在使用JavaScript的早期经验中必须构建的一个有趣的项目是基本计算器。由于我是该语言的新手，这有点挑战，但是我喜欢挑战，所以我开始思考一下，这就是结果。

The first thing I did was to plan the whole process that I was going to carry out, how I was going to structure the code and what kind of functions I would need. After a few minutes thinking about it, I wrote it down on paper and opened my VSCode.

我要做的第一件事是计划要执行的整个过程，如何构造代码以及需要什么样的功能。经过几分钟的思考，我将其记录在纸上并打开了VSCode。

Step 1Create an HTML file using CSS and generate the calculator image on the screen. This is the simplest part.

第1步使用CSS创建HTML文件并在屏幕上生成计算器图像。这是最简单的部分。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Calculator</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./style/style.css">
  </head>
  <body class="bg-secondary">
    <nav class="navbar navbar-dark bg-dark">
      <span class="navbar-brand mb-0 h1 text-success">Calculator</span>
      <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModalCenter">
        Instructions
      </button>
    </nav>
    <div id="calc" class="w-50 mx-auto my-5">
      <table class="w-100"> 
        <tr> 
          <td colspan="4"><input type="text" id="result"/></td> 
          
        </tr>
        <tr>
          <td colspan="2"><input type="button" value="c" id="clear"/> </td>
          <td colspan="2"><input type="button" value="back" id="back"/> </td>  
        </tr> 
        <tr> 
          <td><input type="button" value="1" id="1"/> </td> 
          <td><input type="button" value="2" id="2"/> </td> 
          <td><input type="button" value="3" id="3"/> </td> 
          <td><input type="button" value="/" id="div"/> </td> 
        </tr> 
        <tr> 
          <td><input type="button" value="4" id="4"/> </td> 
          <td><input type="button" value="5" id="5"/> </td> 
          <td><input type="button" value="6" id="6"/> </td> 
          <td><input type="button" value="-" id="sub"/> </td> 
        </tr> 
        <tr> 
          <td><input type="button" value="7" id="7"/> </td> 
          <td><input type="button" value="8" id="8"/> </td> 
          <td><input type="button" value="9" id="9"/> </td> 
          <td><input type="button" value="+" id="add"/> </td> 
        </tr> 
        <tr> 
          <td><input type="button" value="." id="dec"/> </td> 
          <td><input type="button" value="0" id="0"/> </td> 
          <td><input type="button" value="=" id="equal"/> </td> 
          <td><input type="button" value="*" id="mult"/> </td> 
        </tr> 
      </table> 
    </div>
    <!-- Modal -->
    <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Instructions</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <ul class="list-group">
              <li class="list-group-item list-group-item-success">Add first number clicking on</li>
              <li class="list-group-item list-group-item-success">Click operator</li>
              <li class="list-group-item list-group-item-success">Add second number clicking on</li>
              <li class="list-group-item list-group-item-success">Click '=' to see the result</li>
              <li class="list-group-item list-group-item-success">Press 'C' to reset the values</li>
            </ul>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
    <script src="script.js"></script>
  </body>
</html>

Step 2Create the vanilla JS calculator and check that it works. To do this, I first wrote some basic tests with Jest for each of the operations and to make sure that the code I was going to write worked correctly.Then create a function with the four basic operations (addition, subtraction, multiplication and division), nothing to write home about. I run the test and everything was working fine. So the first step of my planning was successful, one Hurray! for me …

第2步创建香草JS计算器并检查其是否有效。为此，我首先用Jest为每个操作编写了一些基本测试，并确保要编写的代码正确运行，然后使用四个基本操作(加，减，乘和除)创建一个函数。，没什么可写的。我进行了测试，一切正常。因此，我的第一步计划成功了，万岁！为了我 …

const calculator =  function calculator(){
  function add(...args) {
    if([...args].length === 0) return 0;
    return [...args].reduce(function sum(sum, value){return sum + value}, 0);
  }
  function subtract(...args) {
    if([...args].length === 0) return 0;
    return [...args].reduce(function sum(diff, value){return diff - value});
  }
  function divide(x, y) {
    if(y === 0){
      return 'ERROR! Cannot divide by 0'
    }
    return x / y;
  }
  function multiply(...args) {
    if([...args].length === 0) return 0;
    return [...args].reduce(function sum(prod, value){return prod * value}, 1);
  }
  return { add, subtract, divide, multiply }
}

Step 3Once verified that the calculator function was working I went to the next phase. Create the operate function that, with the data that the user enters, the corresponding operation applies to me.

步骤3一旦确认计算器功能可以正常工作，我便进入了下一个阶段。创建操作功能，使用用户输入的数据将相应的操作应用于我。

function operate (operator, value1, value2) {
  value1 = checkNumber(value1);
  value2 = checkNumber(value2);
  if(operator === 'add'){
    return calculator().add(value1, value2);
  } else if (operator === 'sub'){
    return calculator().subtract(value1, value2);
  } else if (operator === 'mult') {
    return calculator().multiply(value1, value2);
  } else if (operator === 'div'){
    return calculator().divide(value1, value2);
  }
};

Step 4After that, I needed to store the user data and pass it to my function. So I needed to add some event listeners for each element of my HTML and pass them to a logical function that would define what information is (number, decimal, operand, equal …)

步骤4之后，我需要存储用户数据并将其传递给我的函数。因此，我需要为HTML的每个元素添加一些事件侦听器，并将它们传递给逻辑函数，该逻辑函数将定义什么信息(数字，十进制，操作数，等于...)

const buttons = document.querySelectorAll('input[type="button"]');
buttons.forEach(button => button.addEventListener('click', function () {
  getValue(button.id);
}));

Step 5Create the getValue function to manage all user input and also display them on the screen.

步骤5创建getValue函数来管理所有用户输入，并在屏幕上显示它们。

let temp = '';
let temp2 = '';
let op = '';
const text = document.querySelector('input[type="text"]');
function getValue(value) {
  if(isNaN(value) === false && op === '') {
    temp += value;
    text.value = temp;
  } else if (isNaN(value) === true && temp === '' && temp2 === '') {
    op = '';
    temp = '';
    temp2 = '';
  } else if (isNaN(value) === true && value !== 'clear' && value !== 'dec' && op === '' && value !== 'back') {
    op = value;
  } else if (isNaN(value) === false && op !== ''){
    temp2 += value;
    text.value = temp2;
  } else if (isNaN(value) === true && temp !== '' & temp2 !== '' && value !== 'clear' && value !== 'dec' && value !== 'back'){
    temp = operate(op, temp, temp2);
    temp2 = '';
    text.value = temp;
  } else if (isNaN(value) === true && value === 'dec' && op === '' && !temp.includes('.')) {
    temp += '.';
    text.value = temp;
  } else if (isNaN(value) === true && value === 'dec' && op !== '' && !temp2.includes('.')) {
    temp2 += '.';
    text.value = temp2;
  } else if (isNaN(value) === true && value === 'clear') {
    clear();
  } else if (isNaN(value) === true && value !== 'clear'  && value !== 'dec' && value !== 'back' && op !== '') {
    op = value;
  } else if (isNaN(value) === true && value === 'back' && op === '') {
    temp = text.value.slice(0, -1);
    text.value = temp;
  } else if (isNaN(value) === true && value === 'back' && op !== '') {
    temp2 = text.value.slice(0, -1);
    text.value = temp2;
  }
}

And ready….

准备…。

…Well, no! I had some small bugs that I had to solve. For example, decimal numbers. To do this, create a helper function to check whether the user’s input was an integer or a float.

…嗯，不！我有一些必须解决的小错误。例如，十进制数字。为此，创建一个辅助函数来检查用户输入的是整数还是浮点数。

function checkNumber(number) {
  if(/^\d+\.\d+$/.test(number)){
    return number = parseFloat(number);
  } else {
    return number = parseInt(number);
  }
};

And now, yes … voila! Operational calculator!

现在，是的…… 瞧！运算计算器！

As it was Sunday and it rained I decided to add keyboard support to my calculator and not have to use only the mouse.

由于是星期天，下雨了，我决定为计算器添加键盘支持，而不必只使用鼠标。

const btn1 = document.getElementById('1');
const btn2 = document.getElementById('2');
const btn3 = document.getElementById('3');
const btn4 = document.getElementById('4');
const btn5 = document.getElementById('5');
const btn6 = document.getElementById('6');
const btn7 = document.getElementById('7');
const btn8 = document.getElementById('8');
const btn9 = document.getElementById('9');
const btn0 = document.getElementById('0');
const btnDecimal = document.getElementById('dec');
const btnEqual = document.getElementById('equal');
const btnDivide = document.getElementById('div');
const btnMultiply = document.getElementById('mult');
const btnSubtract = document.getElementById('sub');
const btnAdd = document.getElementById('add');
const btnClear = document.getElementById('clear');
const btnBack = document.getElementById('back');
document.addEventListener("keypress", e => {
  switch (e.key) {
    case '1':
        btn1.click();
        break;
    case '2':
        btn2.click();
        break;
    case '3':
        btn3.click();
        break;
    case '4':
        btn4.click();
        break;
    case '5':
        btn5.click();
        break;
    case '6':
        btn6.click();
        break;
    case '7':
        btn7.click();
        break;
    case '8':
        btn8.click();
        break;
    case '9':
        btn9.click();
        break;
    case '0':
        btn0.click();
        break;
    case '.':
        btnDecimal.click();
        break;
    case '=':
        btnEqual.click();
        break;
    case '/':
        btnDivide.click();
        break;
    case '*':
        btnMultiply.click();
        break;
    case '-':
        btnSubtract.click();
        break;
    case '+':
        btnAdd.click();
        break;
    case 'c':
      btnClear.click();
      break;
    case 'Enter':
      btnEqual.click();
      break;
    case 'Backspace':
      btnBack.click();
      break;
  }
});

And now yes, basic calculator working with mouse and keyboard build with vanilla JavaScript.

现在是的，基本的计算器可使用带有普通JavaScript的鼠标和键盘构建。

You can check it out on my Github.

您可以在我的Github上查看。

翻译自: https://medium.com/@javitocor/how-to-build-a-calculator-with-javascript-fa6be03a0789

javascript计算器

weixin_26750481

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript计算器_如何使用JavaScript构建计算器

javascript计算器Basic calculator using JS 使用JS的基本计算器 One interesting project I had to build in my very early experience with JavaScript was a basic calculator. It was a bit challenging due that I was a ...
复制链接

扫一扫