AngularJs+Bootstrap實現漂亮的計算器

2019-11-19 15:50:50

字體：大中小

來源：轉載

供稿：網友

之前看到一個試題，要求用angularJs和Bootstrap寫一個簡單的計算器，通過百度，發現沒有什么好的例子，所以呢，我就把自己寫的一個例子發出來給大家。（大牛勿噴）

HTML代碼:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html>   <head>     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">     <title>計算器</title>     <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>     <link rel="stylesheet" type="text/css" href="css/style.css" />      </head>   <body>     <div ng-app="myApp" ng-controller="myController" class="row">       <div class="col-md-5 col-xs-5"></div>       <div class="col-md-4 col-xs-4">         <div id="a">           <div id="show">             <input type="text" name="show" ng-model="shuzi" value="{{shuzi}}" class="form-control" disabled/>             <input type="text" name="show" ng-model="jieguo" value="{{jieguo}}" class="form-control" disabled id="b"/>           </div>           <br />           <div class="row">             <div class="col-md-7 col-xs-7">               <button type="button" ng-click="num(7)" class="btn btn-default" id="but">7</button>               <button type="button" ng-click="num(8)" class="btn btn-default" id="but">8</button>               <button type="button" ng-click="num(9)" class="btn btn-default" id="but">9</button>               <button type="button" ng-click="num('/')" class="btn btn-default" id="but">÷</button>               <br/>               <button type="button" ng-click="num(4)" class="btn btn-default" id="but">4</button>               <button type="button" ng-click="num(5)" class="btn btn-default" id="but">5</button>               <button type="button" ng-click="num(6)" class="btn btn-default" id="but">6</button>               <button type="button" ng-click="num('*')" class="btn btn-default" id="but">x</button>               <br/>               <button type="button" ng-click="num(1)" class="btn btn-default" id="but">1</button>               <button type="button" ng-click="num(2)" class="btn btn-default" id="but">2</button>               <button type="button" ng-click="num(3)" class="btn btn-default" id="but">3</button>               <button type="button" ng-click="num('-')" class="btn btn-default" id="but">-</button>               <br/>               <button type="button" ng-click="num(0)" class="btn btn-default" id="but">0</button>               <button type="button" ng-click="reversal()" class="btn btn-default" id="but">±</button>               <button type="button" ng-click="num('.')" class="btn btn-default" id="but">.</button>               <button type="button" ng-click="num('+')" class="btn btn-default" id="but">+</button>             </div>             <div class="col-md-5 col-xs-5">               <button type="button" class="btn btn-primary btn-lg" ng-click="remove()" id="lgbut1">清零</button>               <br/>               <button type="button" class="btn btn-primary btn-lg" ng-click="js()" id="lgbut2">=</button>             </div>           </div>         </div>       </div>       <div class="col-md-4 col-xs-4"></div>     </div>   </body>   <script type="text/javascript" src="js/angular.1.6.3.js"></script>   <script type="text/javascript" src="js/bootstrap.min.js"></script>   <script type="text/javascript" src="js/jisuanqi.js"></script> </html>

AngularJs代碼:

var myApp=angular.module("myApp",[]); myApp.controller("myController",function($scope){   $scope.shuzi="";   $scope.jieguo=0;   $scope.num=function(num){     $scope.shuzi+=num;   }   $scope.js=function(){     $scope.jieguo=(eval($scope.shuzi));   }   $scope.reversal=function(){     if(eval($scope.shuzi)>0){       $scope.shuzi="-"+$scope.shuzi;     }else{       $scope.shuzi=$scope.shuzi.substring(1);     }   }    $scope.remove=function(){     $scope.shuzi="";     $scope.jieguo=0;   } })

效果圖展示: