angularjs實現IOS8內建計算機
首先建立angularjs的基本項目就不說了，最好是利用yeoman這個腳手架工具直接產生,如果沒有該環境的，當然也可以通過自行下載angularjs的檔案引入項目。 main.js是項目的主要js檔案，所有的js都寫在這個檔案中，初始化之後，該檔案的js代碼如下 angular .module('calculatorApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch' ]) .controller('MainCtrl', function ($scope) { $scope.result=""; $scope.data={ "1":["AC","+/-","%","÷"], "2":["7","8","9","×"], "3":["4","5","6","－"], "4":["1","2","3","＋"], "5":["0",".","="] }; }); 這裡的result是用來雙向繫結顯示運算結果的，data為計算機鍵盤上的數字和符號。 該項目相關的所有css代碼如下： *{ margin:0; padding:0;} body { padding-top: 20px; padding-bottom: 20px;}h1{ text-align:center; color:#3385ff;}.main{ margin:20px auto; border:1px solid #202020; border-bottom: none; width:60%; height:600px;} .result{ display: block; width: 100%; height: 30%; background:#202020; box-sizing: border-box; border:none; padding: 0; margin: 0; resize: none; color: #fff; font-size: 80px; text-align: right; line-height: 270px; overflow: hidden; background-clip: border-box; }.row{ height: 14%; background: #d7d8da; box-sizing: border-box; border-bottom: 1px solid #202020; overflow: hidden;} .col{ height: 100%; box-sizing: border-box; border-right:1px solid #202020; float: left; color: #202020; font-size: 28px; text-align: center; line-height: 83px;}.normal{ width: 25%;}.end-no{ width: 25%; border-right: none; background: #f78e11; color: #fff; }.zero{width: 50%;}.history{ background:#3385ff ; color:#fff; font-size: 22px; text-align: center;} 然後是html的布局如下： <body ng-app="calculatorApp" ><h1>calculator for ios8</h1> <hr/> <p class="history">{{ history.join(" ") }}</p><div class="main"> <textarea ng-model="result" class="result" ></textarea> <div ng-repeat="item in data" class="row"> <div class="col" ng-repeat="a in item" ng-class="showClass($index,a)" ng-click="showResult(a)">{{ a }}</div> </div></div></body> 這裡class為history的p標籤是用來顯示輸入記錄的，就是說你按下的所有鍵都會顯示在上面，便於查看結果，history為當前scope下面的一個數組，後面會講解。這裡使用一個textarea來作為計算結果的顯示螢幕，主要是為了使用雙向繫結的特性。同時產生計算機各個按鍵和介面元素都是通過對data對象進行 迴圈遍曆來產生的，showClass方法是scope下面的一個方法，用來擷取不規則介面顯示元素的class屬性，後面會講解，showResult方法就是對按鍵響應的主方法，我們所有對按鍵的按下響應都是通過這個方法來的，後面會詳細講解。 showClass方法代碼如下： //顯示計算機樣式 $scope.showClass=function(index,a){ if(a==0){ return "zero"; } return index==3||a=="="?"end-no":"normal"; }; 這個方法主要是針對每行的最後一列要顯示為橘黃色和對於顯示0的按鍵要佔用兩個儲存格來進行特殊處理。 到目前為止，已經完全實現了計算機的介面，結果如下： 下面需要實現對按鍵的響應，按鍵包括數字鍵，運算子鍵，AC鍵，每種按鍵按下都會有不同相應並且按鍵之間是存在聯絡的 為了使代碼容易講解，採用分段性給出showResult方法的代碼然後進行詳細解釋的方法。 首先，這裡要添加幾個變數進行控制和儲存之用。 //計算時用的數位棧 $scope.num=[]; $scope.history=[]; //接受輸入用的運算子棧 $scope.opt=[]; //計算機計算結果 $scope.result=""; //表示是否要重新開始顯示,為true表示不重新顯示，false表示要清空當前輸出重新顯示數字 $scope.flag=true; //表示當前是否可以再輸入運算子，如果可以為true，否則為false $scope.isOpt=true; num數組實際上是一個棧，用來接收使用者輸入的數字，具體用法後面會講解，history數組為使用者輸入的所有按鍵，每次按下就讓該按鍵上的符號或數字進棧，然後使用綁定即時顯示在介面上。opt數組是另外一個棧，用來接收使用者輸入的運算子。具體用法後面會講解，flag是一個標誌，為true的時候表示在按下數位過程中被按下的數字是當前顯示數位一部分，需要跟在其後面顯示，比如當前介面顯示的是12，再按下3的時候會判斷該標誌，如果為true，就顯示123，否則就清空介面，直接顯示3.isOpt是另外一個標誌，主要是為了防止使用者在輸入過程中對運算子的非法輸入，比如說使用者接連輸入了1+2+，當輸到這裡是，下面輸入的應該是一個數字，但是使用者卻輸入了一個運算子，通過判斷這個標誌，會讓計算機忽略這個非法的運算子，讓輸入依然保持1+2+。 下面的代碼分段給出，完整的代碼就是將它們串連起來。 $scope.init=function(){ $scope.num=[]; $scope.opt=[]; $scope.history=[]; $scope.flag = true; $scope.isOpt=true; } ; $scope.showResult=function(a){ $scope.history.push(a); var reg=/\d/ig,regDot=/\./ig,regAbs=/\//ig; //如果點擊的是個數字 if(reg.test(a)) { //消除凍結 if($scope.isOpt==false){ $scope.isOpt=true; } if ($scope.result != 0 && $scope.flag && $scope.result != "error") { $scope.result += a; } else { $scope.result = a; $scope.flag = true; } } init方法是用來初始化一些變數和標誌，讓它們回到原始狀態。showResult方法是顯示介面響應使用者操作的主方法，上面的代碼是該方法中的一個if分支，表示如果輸入的是一個數字，那麼如果對運算子的輸入已經被凍結（當前不允許輸入運算子了，輸入後會被忽略），那麼輸入數位時候，就解開凍結狀態，以便下次輸入運算子的時候會進入運算子棧。如果當前顯示的結果不為空白並且現在按下的數字是當前顯示的數位一部分並且沒有發生錯誤，那麼顯示的結果就是當前按下的數字接在當前顯示數位末尾，否則就代表重新顯示，重新顯示的時候需要讓下次再輸入的數字接在這個數字後面顯示。 js代碼（接上） //如果點擊的是AC else if(a=="AC"){ $scope.result=0; $scope.init(); }如果點擊的是AC，那麼代表初始化，讓顯示結果為0，清空所有狀態。 js代碼（接上） //如果點擊的是個小數點 else if(a=="."){ if($scope.result!=""&&!regDot.test($scope.result)){ $scope.result+=a; } }如果點擊的是個小數點，則在當前顯示不為空白並且當前顯示的結果裡面不存在小數點的情況下讓這個小數點接在當前顯示的末尾。 js代碼（接上） //如果點擊的是個取反操作符 else if(regAbs.test(a)){ if($scope.result>0){ $scope.result="-"+$scope.result; } else{ $scope.result=Math.abs($scope.result); } } 如果點擊的是個取反操作，則將當前顯示結果取反 js代碼（接上） //如果點擊的是個百分比符號 else if(a=="%"){ $scope.result=$scope.format(Number($scope.result)/100); }如果點擊的是個百分比符號，則將當前顯示結果除以100之後再顯示，這裡有個format函數，其代碼如下： //格式化result輸出 $scope.format=function(num){ var regNum=/.{10,}/ig; if(regNum.test(num)){ if(/\./.test(num)){ return num.toExponential(3); } else{ return num.toExponential(); } } else{ return num; } } 它的作用主要是ios8內建的計算機不會無限顯示很多位的數字，如果超過10位（包括小數點），則採用科學計演算法來顯示，這裡為了簡便，對於含有小數點且超過10位的顯示結果採用科學計演算法計算的時候，讓它保留小數點之後3位顯示。 js代碼（showResult部分接上） //如果點擊的是個運算子且當前顯示結果不為空白和error else if($scope.checkOperator(a)&&$scope.result!=""&&$scope.result!="error"&&$scope.isOpt){ $scope.flag=false; $scope.num.push($scope.result); $scope.operation(a); //點擊一次運算子之後需要將再次點擊運算子的情況忽略掉 $scope.isOpt=false; } 這個分支是最複雜的一個分支，它代表如果輸入的是一個運算子，那麼就要進行運算了。進入到這個分支，需要首先將flag置為false，作用是下次再輸入數字就是重新輸入數字而不是接著當前顯示結果輸入了。 然後要讓當前顯示的數字作為被運算的數字首先進入到數字棧中，operation方法就是運算方法，因為這次已經點擊了一個運算子，所以下次再點擊就要忽略這個運算子，將isOpt置為false。 operation代碼如下 //比較當前輸入的運算子和運算子棧棧頂運算子的優先順序 //如果棧頂運算子優先順序小，則將當前運算子進棧，並且不計算， //否則棧頂運算子出棧，且數字棧連續出棧兩個元素，進行計算 //然後將當前運算子進棧。 $scope.operation=function(current){ //如果運算子棧為空白，直接將當前運算子入棧 if(!$scope.opt.length){ $scope.opt.push(current); return; } var operator,right,left; var lastOpt=$scope.opt[$scope.opt.length-1]; //如果當前運算子優先順序大於last運算子，僅進棧 if($scope.isPri(current,lastOpt)){ $scope.opt.push(current); } else{ operator=$scope.opt.pop(); right=$scope.num.pop(); left=$scope.num.pop(); $scope.calculate(left,operator,right); $scope.operation(current); } }; 該方法接受當前輸入的運算子作為參數，其核心思想為，當前接收到了一個運算子，如果運算子棧為空白，則將當前運算子入棧，然後這種情況就不用再做什麼了。如果當前運算子棧不為空白，那麼彈出當前運算子棧的棧頂元素，讓當前接收的運算子和棧頂運算子比較優先順序（乘除優先順序大於加減，同一優先順序的情況下棧頂運算子優先順序較高，因為先入棧的）。isPri方法用來判斷優先順序的，接收兩個參數，第一個為當前接收的運算子，第二個為出棧的棧頂運算子，如果按照前面所說的規則，當前運算子的優先順序較高，那麼就直接將這個運算子入棧。如果當前運算子優先順序小於棧頂運算子，那麼就需要進行計算並更改計算機的顯示了，將運算數字棧棧頂兩個元素依次彈出，分別作為一次運算的兩個運算數字，然後彈出運算子棧的棧頂元素，作為本次運算的運算子，調用calculate方法進行運算，該方法代碼如下 //負責計算結果函數 $scope.calculate=function(left,operator,right) { switch (operator) { case "＋": $scope.result = $scope.format(Number(left) + Number(right)); $scope.num.push($scope.result); break; case "－": $scope.result = $scope.format(Number(left) - Number(right)); $scope.num.push($scope.result); break; case "×": $scope.result = $scope.format(Number(left) * Number(right)); $scope.num.push($scope.result); break; case "÷": if(right==0){ $scope.result="error"; $scope.init(); } else{ $scope.result = $scope.format(Number(left) / Number(right)); $scope.num.push($scope.result); } break; default:break; } }; 該方法接受三個參數，左運算數字，中間的運算子和右邊的運算數字，按照加減乘除法運算後更改result顯示結果並將計算結果入棧到運算數字棧中，這裡需要注意如果運算的是除法並且除數是0，則發生了錯誤，顯示錯誤，清空所有狀態，否則正常運算。 一次運算完成之後，運算子棧和數字棧中的狀態都會被更改，而目前的按鍵current值還沒有入棧，所以又要重複上述過程進行優先順序比較後在運算，實際上是一個遞迴的過程，直到運算子棧為空白或者當前運算子的優先順序高於運算子棧的棧頂運算子。isPri方法是用來判斷運算子優先順序的，代碼如下： //判斷當前運算子是否優先順序高於last，如果是返回true //否則返回false $scope.isPri=function(current,last){ if(current==last){ return false; } else { if(current=="×"||current=="÷"){ if(last=="×"||last=="÷"){ return false; } else{ return true; } } else{ return false; } } }; 判斷規則前面已經講述。 此外還有一個checkOperator方法，是判斷輸入的符號是不是加減乘除四則運算子號，代碼如下： //判斷當前符號是否是可運算子號 $scope.checkOperator=function(opt){ if(opt=="＋"||opt=="－"||opt=="×"||opt=="÷"){ return true; } return false; } 如果是就返回true，否則返回false。 到目前為止，還有一個輸入等號的分支沒有，其代碼如下（接showResult方法） //如果點擊的是等號 else if(a=="="&&$scope.result!=""&&$scope.result!="error"){ $scope.flag=false; $scope.num.push($scope.result); while($scope.opt.length!=0){ var operator=$scope.opt.pop(); var right=$scope.num.pop(); var left=$scope.num.pop(); $scope.calculate(left,operator,right); } } }; 如果輸入的是等號，則首先將flag置為false，允許下次輸入數位時候介面重新顯示，並且要將當前顯示的數字作為運算數字入棧到數字棧。然後就要進行不斷的出棧運算直到運算子棧為空白才能夠停止。 上面就是實現的主要代碼和過程，由於分支代碼較多而一次全部給出所有分支又不能夠詳細講述，所以將showResult方法分開了，可能看著不太適應，這裡是完整代碼以及demo查看地址。由於寫的比較倉促且沒有花太多時間去測試，可能存在一些bug,歡迎指出。同時由於水平有限，可能該方法不是最好，歡迎給出更好的方案一起交流學習~~
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
