基于AngularJS实现iOS8自带的计算器

很高兴能够为您提供“基于AngularJS实现iOS8自带的计算器”的完整攻略。

简介

这个项目的目标是使用 AngularJS 实现一个和iOS8系统中自带计算器类似的计算器应用程序。在本文档中，我们将使用 HTML、CSS 和 JavaScript 来完成此目标，并探讨一些实现上的细节。

实现

开始

首先，在命令行中创建一个名为 angular-calculator 的文件夹，并进入该文件夹：

mkdir angular-calculator
cd angular-calculator

接下来，我们需要创建一个名为 index.html 的 HTML 文件来运行我们的 AngularJS 应用程序。以下是该架构的基本实现：

<!DOCTYPE html>
<html>
  <head>
    <title>iOS8 Calculator Clone</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
  </head>

  <body ng-app="CalculatorApp">
    <div ng-controller="CalculatorController">
      <h1>iOS8 Calculator Clone</h1>

      <div class="row">
        <div class="col-md-12">Input: {{ input }}</div>
      </div>

      <div class="row mt-3">
        <button class="btn btn-dark btn-lg col-md-3">AC</button>
        <button class="btn btn-dark btn-lg col-md-3">+/-</button>
        <button class="btn btn-dark btn-lg col-md-3">%</button>
        <button class="btn btn-primary btn-lg col-md-3">÷</button>
      </div>

      <!-- more buttons... -->

    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>

上面的 HTML 文件遵循 Bootstrap 4 的约定，使我们的应用程序看起来像系统自带的 iOS8 计算器。接下来，我们将创建 app.js 文件，并创建一个名为 CalculatorApp 的 AngularJS 应用程序。

AngularJS 应用程序

我们的 AngularJS 应用程序将包括一个名为 CalculatorController 的控制器，并使用 $scope 服务处理控制器之间的通信和状态管理。以下是 app.js 文件的基本实现：

angular.module('CalculatorApp', [])
  .controller('CalculatorController', function($scope) {
    $scope.input = '0';
  });

上面的代码定义了名为 CalculatorApp 的 AngularJS 应用程序，并创建了名为 CalculatorController 的控制器。我们没有在控制器中实现任何逻辑，但是使用了 $scope 服务定义了一个名为 input 的默认状态变量。现在，我们需要将输入添加到文本框中，并将其与应用程序状态绑定。以下是文本框的 HTML 和控制器的更新：

<div class="col-md-12">Input: <input class="form-control" ng-model="input" style="text-align:right;" /></div>

angular.module('CalculatorApp', [])
  .controller('CalculatorController', function($scope) {
    $scope.input = '0';

    $scope.addInput = function(value) {
      $scope.input += value.toString();
    };
  });

现在，我们可以在页面上输入任何数字，并见到进行输入的结果。接下来，我们将添加用于执行运算的代码。

运算

我们的应用程序将支持四个基本运算：加法、减法、乘法和除法。为了实现该功能，我们将在 CalculatorController 中创建两个命令变量：一个用于存储上一个数字，一个用于存储当前正在输入的数字。以下是 CalculatorController 代码的更改：

angular.module('CalculatorApp', [])
  .controller('CalculatorController', function($scope) {
    var pendingValue = null;
    var lastOperation = null;
    var inputString = '0';

    $scope.addInput = function(value) {
      if(inputString === '0') {
        inputString = '';
      }

      inputString += value.toString();
      $scope.input = parseFloat(inputString);
    };
  });

现在，我们可以在输入文本框中添加新数字，但是我们需要一种方法来管理上一次的数字，这就需要知道用户在执行操作之前输入的这个数字。我们需要一个函数来存储这个值，并在用户按下运算符时执行这个函数。

接下来，我们将实现四个完成运算的函数：add、subtract、multiply 和 divide。我们的应用程序还将支持百分比运算。以下是我们的新控制器与这些运算函数：

angular.module('CalculatorApp', [])
  .controller('CalculatorController', function($scope) {
    var pendingValue = null;
    var lastOperation = null;
    var inputString = '0';

    $scope.addInput = function(value) {
      if(inputString === '0') {
        inputString = '';
      }

      inputString += value.toString();
      $scope.input = parseFloat(inputString);
    };

    $scope.storeValue = function() {
      // Store the current value in a separate variable
      pendingValue = $scope.input;

      // Reset the input string
      inputString = '0';
    };

    $scope.clearAll = function() {
      inputString = '0';
      $scope.input = '0';
      pendingValue = null;
      lastOperation = null;
    };

    $scope.handleOperation = function(operation) {
      // Only execute if we have an operation previously set
      if(lastOperation) {
        switch(lastOperation) {
          case 'add':
            pendingValue += $scope.input;
            break;
          case 'subtract':
            pendingValue -= $scope.input;
            break;
          case 'multiply':
            pendingValue *= $scope.input;
            break;
          case 'divide':
            pendingValue /= $scope.input;
            break;
          case 'percent':
            pendingValue = pendingValue / 100;
            break;
        }

        lastOperation = operation;
        inputString = '0';
        $scope.input = pendingValue;

      } else {
        // If we don't have a lastOperation set, assume that the current input value is our pendingValue
        lastOperation = operation;
        $scope.storeValue();
      }
    };

    $scope.add = function() {
      $scope.handleOperation('add');
    };

    $scope.subtract = function() {
      $scope.handleOperation('subtract');
    };

    $scope.multiply = function() {
      $scope.handleOperation('multiply');
    };

    $scope.divide = function() {
      $scope.handleOperation('divide');
    };

    $scope.percent = function() {
      $scope.handleOperation('percent');
    };
  });

我们可以看到，我们添加了一个名为 pendingValue 的变量，用于存储上次输入的值，以及一个名为lastOperation 的变量，用于在用户执行下一次运算之前记录上一次用户执行的运算类型。这些变量使我们能够执行运算，并将结果存储在 pendingValue 变量中。接下来，我们将继续完善UI界面。

完善UI

我们的计算器现在可以进行基本的算术运算，但是如果我们希望看起来像 iOS8 自带的计算器，则需要更多的样式。以下是我们可以更改样式的行的代码：

<div class="row mt-3">
  <button class="btn btn-dark btn-lg col-md-3">AC</button>
  <button class="btn btn-dark btn-lg col-md-3">+/-</button>
  <button class="btn btn-dark btn-lg col-md-3" ng-click="percent()">%</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="divide()">÷</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(7)">7</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(8)">8</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(9)">9</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="multiply()">*</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(4)">4</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(5)">5</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(6)">6</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="subtract()">-</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(1)">1</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(2)">2</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(3)">3</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="add()">+</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-6" ng-click="addInput(0)">0</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput('.')">.</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="calculate()">=</button>
</div>

以上代码主要是改变了按钮的颜色和添加图标。

特性

现在，您已经知道了一个完全功能的 AngularJS 计算器的构建方法。但是，您可以让它变得更好。以下是您可能希望添加到应用程序的功能：

应用程序可以处理键盘输入。
应用程序可以在计算后保留输入。
应用程序可以添加更多的操作和功能。
应用程序可以添加可配置的选项，例如小数位数或项目的颜色。

示例说明

示例一

我们想要在我们的计算器应用程序中实现小数的运算功能，例如 0.5 * 2 = 1，1 / 3 = 0.333333 等。为了实现此功能，我们需要在运算函数中添加一些逻辑，以确保当用户输入小数时应用程序的行为正确。以下是修改版的代码实现：

angular.module('CalculatorApp', [])
  .controller('CalculatorController', function($scope) {
    // ...

    $scope.addInput = function(value) {
      if(inputString === '0' && !isNaN(value)) {
        inputString = '';
      }

      inputString += value.toString();
      $scope.input = parseFloat(inputString);
    };

    $scope.handleOperation = function(operation) {
      // Only execute if we have an operation previously set
      if(lastOperation) {
        switch(lastOperation) {
          case 'add':
            pendingValue += $scope.input;
            break;
          case 'subtract':
            pendingValue -= $scope.input;
            break;
          case 'multiply':
            pendingValue *= $scope.input;
            break;
          case 'divide':
            pendingValue /= $scope.input;
            break;
          case 'percent':
            pendingValue = pendingValue / 100;
            break;
        }

        lastOperation = operation;
        inputString = '0';
        $scope.input = parseFloat(pendingValue.toFixed(10));

      } else {
        // If we don't have a lastOperation set, assume that the current input value is our pendingValue
        lastOperation = operation;
        $scope.storeValue();
      }
    };
  });

我们将 addInput 函数的实现更改为更好地处理小数。此外，我们在 handleOperation 函数中添加代码来限制计算结果小数位数的方法。

示例二

我们要在我们的计算器上添加一个求平方根的功能。我们可以先在计算器上带上SQRT操作按钮，然后在下面添加SQRT函数实现。如果用户输入负数，则在求平方根按钮上启用‘AC’按钮并显示一个错误。以下是修改版的代码实现：

<div class="row mt-3">
  <button class="btn btn-dark btn-lg col-md-3" ng-click="clearAll()" ng-class="{ 'disabled': input < 0 }">AC</button>
  <button class="btn btn-dark btn-lg col-md-3" ng-click="addInput('-')" ng-class="{ 'disabled': input < 0 }">+/-</button>
  <button class="btn btn-dark btn-lg col-md-3" ng-click="percent()" ng-class="{ 'disabled': input < 0 }">%</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="divide()" ng-class="{ 'disabled': input < 0 }">÷</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(7)">7</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(8)">8</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(9)">9</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="multiply()">*</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(4)">4</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(5)">5</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(6)">6</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="subtract()">-</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(1)">1</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(2)">2</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput(3)">3</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="add()">+</button>
</div>

<div class="row mt-3">
  <button class="btn btn-light btn-lg col-md-6" ng-click="addInput(0)">0</button>
  <button class="btn btn-light btn-lg col-md-3" ng-click="addInput('.')">.</button>
  <button class="btn btn-primary btn-lg col-md-3" ng-click="calculate()">=</button>
</div>

<div class="row mt-3">
  <button class="btn btn-info btn-lg col-md-6" ng-click="sqrt()" ng-class="{ 'disabled': input < 0 }">√</button>
  <button class="btn btn-danger btn-lg col-md-6" ng-click="clear()" ng-class="{ 'disabled': input < 0 }">C</button>
</div>

angular.module('CalculatorApp', [])
  .controller('CalculatorController', function($scope) {
    // ...

    $scope.sqrt = function() {
      if($scope.input >= 0) {
        $scope.input = Math.sqrt($scope.input).toFixed(10);
      } else {
        $scope.input = 'Error';
      }
    };

    $scope.clear = function() {
      if($scope.input >= 0) {
        $scope.input = $scope.input.toString().substring(0, $scope.input.length - 1);
      }
    };
  });

上面的代码添加了一个名为 sqrt 的函数，以计算输入数字的平方根，并引入了名为 clear 的函数，以删除当前输入。括号内的 ng-class 指令用于根据输入状态禁用按钮，以防止用户执行无效操作。

好了，以上就是详细讲解“基于AngularJS实现iOS

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于AngularJS实现iOS8自带的计算器 - Python技术站

基于AngularJS实现iOS8自带的计算器

简介

实现

开始

AngularJS 应用程序

运算

完善UI

特性

示例说明

示例一

示例二

相关文章