Question

我刚用AngularJS制作了一个简单的计算器应用程序。

该程序可以做什么：

每系列数字按. 2次时出现错误输入。
每个系列号码只接受10个号码。
检查是否完成操作。
用户每1系列数字只能做1个公式。

但仍有一些错误：

当最多10个号码时，如果按删除，程序仍然可以接受超过10个号码？
计算后的一段时间，程序允许输入最多12个数字？

var mainApp = angular.module("mainApp", []);
    mainApp.controller('CalCtrl', function($scope) {
    $scope.output = "0";
    $scope.curIndex = 0;
    $scope.result = 0;
    
    $scope.checkInput = function(num) {
        var tmp = true;
        if($scope.result != 0) {
            $scope.result = 0;
            $scope.output = "0";
            tmp = true;
        }
        if(angular.equals('+', num) || 
            angular.equals('-', num) ||
            angular.equals('*', num) || 
            angular.equals('/', num)) {
            var index = "+|-|*|/".indexOf($scope.output.charAt($scope.output.length - 1));
            if(index >= 0) {
                tmp = false;
                $scope.msg = "You only can do 1 formula per 1 time.";
            }
            $scope.curIndex = $scope.output.length + 1;
        } else {
            tmp = true;
            if($scope.output.substring($scope.curIndex).length < 10) {
                if(angular.equals(num, ".")) {
                    var k = 0;
                    for(var j = 0; j < $scope.output.substring($scope.curIndex).length; j++){
                        if(angular.equals(".", $scope.output.substring($scope.curIndex).charAt(j))) {
                            k = k + 1;
                        }
                    }
                    if(k >= 1){
                        $scope.msg = "You can't add '.' 2 times per series of numbers!";
                        tmp = false;
                    }
                } else {
                    tmp = true;
                }
            } else {
                $scope.msg = "You can't input more than 10 number per series of numbers!";
                tmp = false;
            }
        }
        return tmp;
    }
    
    $scope.operate = function(op) {
        if($scope.checkInput(op)) {
            $scope.output = $scope.output + op;
        }
    }
    
    
    $scope.press = function(num) {
        if($scope.checkInput(num)) {
            if(angular.equals(num, 'x')){
                $scope.output = $scope.output.slice(0 , $scope.output.length - 1);    
            } else {
                if (angular.equals($scope.output, "0")) {
                    $scope.output = "";
                    $scope.msg = "";
                    $scope.output += num;
                } else if (angular.equals(".", $scope.output)){
                    $scope.msg = "";
                    $scope.output = "0.";
                    $scope.output += num;
                } else {
                    $scope.msg = "";
                    $scope.output += num;
                }
            }
        } else {
            if(angular.equals(num, 'x')){
                $scope.msg = "";
                $scope.output = $scope.output.slice(0 , $scope.output.length - 1);    
            }
        }
    }
    
    $scope.equal = function() {
        var isOpEnd = "+|-|*|/".indexOf($scope.output.charAt($scope.output.length - 1));
        if(isOpEnd >= 0) {
            $scope.msg = "You must complete the formula first!";
        } else if(eval($scope.output) == 0){
            $scope.output = "0";
        } else {
            $scope.msg = "";
            $scope.result = eval($scope.output);
            $scope.output = $scope.result;
        }
    }
});

table, th, td {
    border: 1px solid grey;
    border-collapse: collapse;
    padding: 5px;
}

table tr:nth-child(odd) {
    background-color: #f2f2f2;
}

table tr:nth-child(even) {
    background-color: #ffffff;
}

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="mainApp" align="center">
    <h2>AngularJS Calculator Application by Rain</h2>
    <div ng-controller="CalCtrl">
        <table width="250px" height="300px" align="center">
            <tr>
                <td colspan="4">
                    <input type="text" style="text-align:center; width: 236px; height:30px" name="output" id="res" value="{{output}}" disabled = "disabled">
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <button title="Number 1" style="width:56px" ng-click="press('1')">1</button>
                    <button title="Number 2" style="width:56px" ng-click="press('2')">2</button>
                    <button title="Number 3" style="width:56px" ng-click="press('3')">3</button>
                    <button title="Operate +" style="width:56px" ng-click='operate("+")' >+</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <button style="width:56px" ng-click="press('4')">4</button>
                    <button style="width:56px" ng-click="press('5')">5</button>
                    <button style="width:56px" ng-click="press('6')">6</button>
                    <button title="Operate -" style="width:56px" ng-click='operate("-")' >-</button>
                </td>
            </tr>
            <tr>
                <td colspan="4">
                    <button title="Number 7" style="width:56px" ng-click="press('7')">7</button>
                    <button title="Number 8" style="width:56px" ng-click="press('8')">8</button>
                    <button title="Number 9" style="width:56px" ng-click="press('9')">9</button>
                    <button title="Operate *" style="width:56px" ng-click='operate("*")' >x</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button title="Number 0" style="width:56px" ng-click="press('0')">0</button>
                    <button title="." style="width:56px" ng-click="press('.')">.</button>
                    <button title="Clear all" style="width:56px" ng-click="output = '0'">C</button>
                    <button title="Operate ÷" style="width:56px" ng-click='operate("/")' >÷</button>
                </td>
            </tr>
            <tr>
                <td>
                    <button style="width:175px" ng-click="equal()">=</button>
                    <button title="Delete" style="width:56px" ng-click="press('x')">&#9003;</button>
                </td>
            </tr>
        </table>
        <span align="center" style="color:red">{{msg}}</span>
    </div>
</div>

示例计算器应用程序

0 个答案: