温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

AngularJs+Bootstrap如何实现计算器

发布时间:2021-06-30 14:37:05 来源:亿速云 阅读:148 作者:小新 栏目:web开发

这篇文章主要为大家展示了“AngularJs+Bootstrap如何实现计算器”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“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; 
  } 
})

效果图展示:

AngularJs+Bootstrap如何实现计算器

以上是“AngularJs+Bootstrap如何实现计算器”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI