AngularJs+Bootstrap实现漂亮的计算器


Posted in Javascript onAugust 10, 2017

之前看到一个试题,要求用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实现漂亮的计算器

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 窗口加载蒙板 内嵌网页内容
Nov 19 Javascript
js输入框邮箱自动提示功能代码实现
Dec 10 Javascript
jquery 实现两级导航菜单附效果图
Mar 07 Javascript
ExtJS4 表格的嵌套 rowExpander应用
May 02 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
微信小程序-消息提示框实例
Nov 24 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
纯js实现的积木(div层)拖动功能示例
Jul 19 Javascript
解决IOS端微信H5页面软键盘弹起后页面下方留白的问题
Jun 05 Javascript
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
React-Native做一个文本输入框组件的实现代码
Aug 10 #Javascript
js实现省市级联效果分享
Aug 10 #Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 #Javascript
jquery对table做排序操作的实例演示
Aug 10 #jQuery
基于JavaScript实现飘落星星特效
Aug 10 #Javascript
提高Node.js性能的应用技巧分享
Aug 10 #Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 #Javascript
You might like
在PHP的图形函数中显示汉字
2006/10/09 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php解析xml 的四种简单方法(附实例)
2016/07/11 PHP
PHP中单例模式与工厂模式详解
2017/02/17 PHP
PHP简单读取xml文件的方法示例
2017/04/20 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
类似GMAIL的Ajax信息反馈显示
2010/02/16 Javascript
jquery与google map api结合使用 控件,监听器
2010/03/04 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
node.js操作MongoDB的实例详解
2017/10/11 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
详解babel升级到7.X采坑总结
2019/05/12 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
深入剖析Python的爬虫框架Scrapy的结构与运作流程
2016/01/20 Python
python 调用HBase的简单实例
2016/12/18 Python
python的继承知识点总结
2018/12/10 Python
基于Python在MacOS上安装robotframework-ride
2018/12/28 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python创建数字列表的示例
2019/11/28 Python
基于tensorflow指定GPU运行及GPU资源分配的几种方式小结
2020/02/03 Python
解决Python 异常TypeError: cannot concatenate 'str' and 'int' objects
2020/04/08 Python
快速创建python 虚拟环境
2020/11/28 Python
pandas 按日期范围筛选数据的实现
2021/02/20 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
美国户外服装和装备购物网站:Outland USA
2020/03/22 全球购物
医学专业个人求职自荐信格式
2013/09/23 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
员工工作表现评语
2014/04/26 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
JavaScript获取URL参数的方法分享
2022/04/07 Javascript