AngularJs+Bootstrap实现漂亮的计算器_网络技术_宿州市腾雀网络科技有限公司

AngularJs+Bootstrap实现漂亮的计算器

发布时间 - 2026-01-11 02:43:52 点击率：次

之前看到一个试题，要求用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; 
  } 
})

效果图展示:

源码打包下载：https://github.com/tianfayl/public

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

# angularJs # Bootstrap # 计算器 # AngularJs的UI组件ui-Bootstrap之Tooltip和Popover # 详解Angular-ui-BootStrap组件的解释以及使用 # angular项目中bootstrap-datetimepicker时间插件的使用示例 # AngularJS+Bootstrap3多级导航菜单的实现代码 # Bootstrap与Angularjs的模态框实例代码 # Angular应用Bootstrap过程步骤逻辑详解 # 没有什么 # 就把 # 大家多多 # 打包下载 # 大牛 # 清零 # 来给大家 # text # content # charset # UTF # title # Type # head # gt # meta

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：Linux操作技巧：如何快速查找当前用户

下一篇：石家庄整站优化的核心策略与技巧有哪些？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：Linux操作技巧：如何快速查找当前用户

下一篇：石家庄整站优化的核心策略与技巧有哪些？