<!DOCTYPE html> <html lang="en" class="buttonDiv"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> <title>計算器</title> <script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script> <!--<script src="../js/angular.min.js"></script>--> <script> var app = angular.module("myCount", []); app.controller("theCount", function ($scope) { $scope.textView = "0"; $scope.fuhao = ""; $scope.firstNumber = ""; $scope.secondNumber = ""; // $scope.flag = 0;//是否點擊等於號，0表示處於未點擊狀態，1表示以點擊後的狀態 //歸0 $scope.doEmpty = function () { $scope.textView = "0"; $scope.fuhao = ""; $scope.firstNumber = ""; $scope.secondNumber = ""; } //點擊正負數時 $scope.valiteNumber = function () { if ($scope.firstNumber == "") {//什麼都沒有時 $scope.firstNumber = "-"; return; } if ($scope.firstNumber != "" && $scope.fuhao == "") { if ($scope.firstNumber / 1 > 0) { $scope.firstNumber = "-" + $scope.firstNumber; } else { $scope.firstNumber = $scope.firstNumber.substring(1, $scope.firstNumber.length); } $scope.textView = $scope.firstNumber; return; } if ($scope.fuhao != "") { if ($scope.secondNumber == "") { $scope.secondNumber = "-"; $scope.textView = $scope.secondNumber; return; } if ($scope.secondNumber / 1 > 0) { $scope.secondNumber = "-" + $scope.secondNumber; } else { $scope.secondNumber = $scope.secondNumber.substring(1, $scope.secondNumber.length); } $scope.textView = $scope.secondNumber; return; } } //點擊運算符號 $scope.addChar = function (theChar) { if ($scope.firstNumber != "" && $scope.fuhao == "") { if ($scope.firstNumber == "." || $scope.firstNumber == "-") { return; } $scope.fuhao = theChar; return; } if ($scope.firstNumber != "" && $scope.fuhao != "" && $scope.secondNumber == "") { $scope.fuhao = theChar; return; } if ($scope.firstNumber != "" && $scope.fuhao != "" && $scope.secondNumber != "") { if ($scope.secondNumber == "." || $scope.secondNumber == "-") { return; } if ($scope.fuhao == "÷" && $scope.secondNumber == "0") { return; } $scope.doCount(); $scope.fuhao = theChar; return; } // $scope.textView = $scope.firstNumber + $scope.fuhao + $scope.secondNumber; } //addChar //刪除 $scope.deleteOneChar = function () { if ($scope.secondNumber != "") { $scope.secondNumber = $scope.secondNumber.substring(0, $scope.secondNumber.length - 1); $scope.textView = $scope.secondNumber; return; } if ($scope.fuhao != "") { $scope.fuhao = ""; $scope.textView = $scope.firstNumber; return; } if ($scope.firstNumber != "") { $scope.firstNumber = $scope.firstNumber.substring(0, $scope.firstNumber.length - 1); if ($scope.firstNumber == "") { $scope.textView = "0"; return; } $scope.textView = $scope.firstNumber; return; } $scope.textView = 0; }//deleteOneChar //添加數字 $scope.addNumber = function (text) { if ($scope.fuhao == "") { if (text == "." && $scope.firstNumber.indexOf(".") > -1) { return; } $scope.firstNumber += text; $scope.textView = $scope.firstNumber; } else { if (text == "." && $scope.secondNumber.indexOf(".") > -1) { return; } $scope.secondNumber += text; $scope.textView = $scope.secondNumber; } } //計算 $scope.doCount = function () { if ($scope.firstNumber == "" || $scope.fuhao == "" || $scope.secondNumber == "") { return; } if ($scope.firstNumber != "") { if ($scope.firstNumber == "." || $scope.firstNumber == "-") { return; } } if ($scope.secondNumber != "") { if ($scope.secondNumber == "." || $scope.secondNumber == "-") { return; } } var fNumber = $scope.firstNumber / 1; var sNumber = $scope.secondNumber / 1; var result = 0; switch ($scope.fuhao) { case "×": result = fNumber * sNumber; break; case "÷": if (sNumber == 0) { return; } result = fNumber / sNumber; break; case "+": result = fNumber + sNumber; break; case "-": result = fNumber - sNumber; break; } if ($scope.fuhao == "÷" && sNumber == 1) { } else { var temp = result + ""; if (temp.indexOf('.') > -1 && temp.split('.')[1].length >= 8) { result = result.toFixed(8); } } $scope.textView = result / 1 + ""; $scope.fuhao = ""; $scope.firstNumber = result / 1 + ""; $scope.secondNumber = ""; }//doCount } ); </script> <style type="text/css"> .button { text-align: center; margin-top: 6%; height: 50%; font-size: xx-large; border-radius: 30px; outline: darkorange 5px; -webkit-box-shadow: 3px 3px 3px 3px #FF452C; background-color: #c8d6ff; } .buttonLeft { width: 20%; } .buttonRightZero { width: 42.5%; margin-right: 2%; } .buttonRight { width: 20%; margin-right: 2%; } .maxDiv { width: 100%; height: 100%; margin: 5%; } .buttonBackground { background-color: darkslategrey; font-weight: bold; /*border-color: transparent;*/ } .input { width: 88%; height: 50%; text-align: right; background-color: white; margin-bottom: 0%; margin-top: 8%; font-size: xx-large; } body { height: 100%; width: 100%; background-color: lightgray; } .buttonDiv { height: 100%; width: 100%; margin-bottom: 1%; } .inputDiv { height: 25%; width: 100%; } .buttonDot { font-weight: bold; font-size: 50px; } </style> </head> <body> <div ng-app="myCount" ng-controller="theCount" class="maxDiv"> <div class="inputDiv"> <input class="input" ng-model="textView" disabled> </divclass> <div class="buttonDiv"> <button class="button buttonRight buttonBackground" ng-model="empty" ng-click="doEmpty()">AC</button> <button class="button buttonRight buttonBackground" ng-model="delete" ng-click="deleteOneChar()">C</button> <button class="button buttonRight buttonBackground" ng-model="cheng" ng-click="addChar('×')">×</button> <button class="button buttonLeft buttonBackground" ng-model="chu" ng-click="addChar('÷')">÷</button> <button class="button buttonRight" ng-model="one" ng-click="addNumber('1')">1</button> <button class="button buttonRight" ng-model="two" ng-click="addNumber('2')">2</button> <button class="button buttonRight" ng-model="three" ng-click="addNumber('3')">3</button> <button class="button buttonLeft buttonBackground" ng-model="jian" ng-click="addChar('-')">-</button> <button class="button buttonRight" ng-model="four" ng-click="addNumber('4')">4</button> <button class="button buttonRight" ng-model="five" ng-click="addNumber('5')">5</button> <button class="button buttonRight" ng-model="six" ng-click="addNumber('6')">6</button> <button class="button buttonLeft buttonBackground" ng-model="jia" ng-click="addChar('+')">+</button> <button class="button buttonRight" ng-model="seven" ng-click="addNumber('7')">7</button> <button class="button buttonRight" ng-model="eight" ng-click="addNumber('8')">8</button> <button class="button buttonRight" ng-model="nine" ng-click="addNumber('9')">9</button> <button class="button buttonLeft buttonBackground" ng-model="dengyu" ng-click="doCount()">=</button> <button class="button buttonRightZero" ng-model="zero" ng-click="addNumber('0')">0</button> <button class="button buttonRight buttonDot" ng-model="dot" ng-click="addNumber('.')">.</button> <button class="button buttonRight buttonBackground" ng-model="zhengfu" ng-click="valiteNumber()">+/- </button> </div> </div> </div> </body> </html>
運行效果圖如下所示：
版權所有，未經允許，不得轉載