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实现div浮动在网页最顶上并带关闭按钮效果实例
Aug 13 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
Jul 18 Javascript
jquery中change()用法实例分析
Feb 06 Javascript
JQuery控制Radio选中方法分析
May 29 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
Oct 25 Javascript
IntersectionObserver API 详解篇
Dec 11 Javascript
Bootstarp基本模版学习教程
Feb 01 Javascript
JavaScript的继承实现小结
May 07 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
Vue验证码60秒倒计时功能简单实例代码
Jun 22 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 Javascript
微信小程序实现日历小功能
Nov 18 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
Zerg兵种介绍
2020/03/14 星际争霸
第十二节--类的自动加载
2006/11/16 PHP
phpmyadmin导入(import)文件限制的解决办法
2009/12/11 PHP
php date与gmdate的获取日期的区别
2010/02/08 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
10条php编程小技巧
2015/07/07 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP实现微信对账单处理
2018/10/01 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
Javascript中call与apply的学习笔记
2014/09/22 Javascript
基于jquery实现等比缩放图片
2014/12/03 Javascript
AngularJS初始化过程分析(引导程序)
2014/12/06 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
基于jQuery的AJAX和JSON实现纯html数据模板
2016/08/09 Javascript
使用bootstrap validator的remote验证代码经验分享(推荐)
2016/09/21 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
详解vue模拟加载更多功能(数据追加)
2017/06/23 Javascript
利用vue.js实现被选中状态的改变方法
2018/02/08 Javascript
Vue 框架之动态绑定 css 样式实例分析
2018/11/14 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
JS实现电商商品展示放大镜特效
2020/01/07 Javascript
Python实时获取cmd的输出
2015/12/13 Python
Java编程迭代地删除文件夹及其下的所有文件实例
2018/02/10 Python
使用Anaconda3建立虚拟独立的python2.7环境方法
2018/06/11 Python
python GUI库图形界面开发之PyQt5窗口背景与不规则窗口实例
2020/02/25 Python
Python操作Excel的学习笔记
2021/02/18 Python
佳能德国网上商店:Canon德国
2017/03/18 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
如何用SQL语句进行模糊查找
2015/09/25 面试题
校庆筹备方案
2014/03/30 职场文书
宣传普通话标语
2014/06/27 职场文书
大学生先进个人主要事迹材料
2015/11/04 职场文书
详解Flutter自定义应用程序内键盘的实现方法
2022/06/14 Java/Android