AngularJs+Bootstrap实现漂亮的计算器
时间:2019-03-31
本文章向大家介绍AngularJs+Bootstrap实现漂亮的计算器,主要包括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; } })
效果图展示:
源码打包下载:https://github.com/tianfayl/public
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 用SPSS做数据分析?先弄懂SPSS的基础知识吧
- 学习笔记CB001:NLTK库、语料库、词概率、双连词、词典
- 时序列数据库武斗大会之 OpenTSDB 篇
- 应当使用 SQLite 的五个原因
- Apache Spark作为编译器:深入介绍新的Tungsten执行引擎
- DC/OS 的安装与部署
- Go语言实践:从新手入门到上线真实的小型服务所遇到的那些坑
- 4个简单的数据管理技巧
- MongoDB的设计模式策略
- 如何用容器实现生产级Redis sharding集群一键交付
- Hadoop旧mapreduce的map任务切分原理
- 解读Neo4j全新的Python驱动程序
- MySQL 5.7 X Plugin:流水线技术vs.并行查询技术
- 在下函数式编程,有何贵干?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 总结 | DataFrame、Series、array、tensor的创建及相互转化
- 这就是你日日夜夜想要的docker!!!---------Harbor私有仓库
- Go by Example 中文版: 写文件
- PWN:House Of Force
- Windwos10下使用VS2017搭建cocos2d-x 4.0开发环境
- JavaScript 中的函数式编程:函数,组合和柯里化
- 如何设置一个生产级别的高可用etcd集群
- NVIDIA Jetson nano可以处理4K相机吗?来验证编码性能吧(中)
- House Of Lore原理学习
- 使用 rush 进行命令并行处理
- 老生常谈 Spring Aop 日志收集与处理做的工具包,贼好用?
- Kaggle金牌得主的Python数据挖掘框架,机器学习基本流程都讲清楚了
- Go by Example 中文版: 行过滤器
- Elasticsearch重要知识点 | 选举流程详解
- 妹妹问我:Dubbo集群容错负载均衡