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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
基于AngularJS实现的工资计算器实例
本文实例讲述了基于AngularJS实现的工资计算器.分享给大家供大家参考,具体如下: 先看界面: 其实在ng中最让人印象深刻的就是数据的双向绑定,在html中就完成了很多操作.大概用到的就是控制器视图服务等,没有分模块写控制器,代码如下: <html ng-app = "myApp"> <head> <title>工资计算器ng</title> <script src= "angular.js"><
-
基于AngularJS实现iOS8自带的计算器
前言 首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自行下载angularjs的文件引入项目. 实例详解 main.js是项目的主要js文件,所有的js都写在这个文件中,初始化之后,该文件的js代码如下 angular .module('calculatorApp', [ 'ngAnimate', 'ngCookies', 'ngResource', 'ngRoute', 'ngSanitize', 'ngTouch'
-
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> <me
-
基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能,总结前端学习过的内容. 技术:NodeJS.Express.Monk.MongoDB.AngularJS.BootStrap.跨域 效果: 一.Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错. Bootstrap是Twitter推出的一款简洁.直
-
AngularJS Bootstrap详细介绍及实例代码
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. 查看 Bootstrap教程. Bootstrap 你可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link rel="stylesheet" href="//maxcdn.bootstrapcdn.
-
AngularJS bootstrap启动详解及实例代码
对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了. 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html中,但是对于新手使用来说,还是足够了! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script s
-
AngularJS+bootstrap实现动态选择商品功能示例
本文实例讲述了AngularJS+bootstrap实现动态选择商品功能.分享给大家供大家参考,具体如下: 项目中后台一个商品库,新建活动时动态选择所需商品 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
-
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
Angular JS (Angular.JS) 是一组用来开发Web页面的框架.模板以及数据绑定和丰富UI组件.它支持整个开发进程,提供web应用的架构,无需进行手工DOM操作. AngularJs 就是一个函数库,算不上一个框架,源码2万2千多行,提供了前端MVC的开发方式,有双向绑定,指令等特性,这是具有革命性的.我是多么反感jQuery 用选择器 选择元素 ,绑定事件,进行一大堆DOM操作,一旦代码过多,非常不好维护,html结构改变,又要重写js代码,不过 jQuery 对 ajax的
-
AngularJs bootstrap搭载前台框架——基础页面
1.用AngularJs app种子初步搭载好框架之后就需要我们手动往里面填充一些东西了,首先打开我们的app文件夹下面的index.html,加入一些我们需要用的js和css(当然是bootstrap的),代码如下: <script src="lib/angular/angular.min.js"></script> <script src="lib/jquery/jquery-1.10.2.min.js"></scrip
-
AngularJs bootstrap搭载前台框架——js控制部分
这个简单的框架最后只剩下了js的控制部分了,angular框架有自己的逻辑部分,有自己的controller和service层,由于我们可能要用到angular的一些内置的resource和cookie,所以我们需要再加入angular的一些lib: --------------index.html------------------ <script src="lib/angular/angular-strap.js"></script> <script
-
Spring Boot+AngularJS+BootStrap实现进度条示例代码
Spring Boot+AngularJS+BootStrap实现进度条 原理 进度条的原理是在上传文件的时候,当程序运行到某一个部分,往Session中设置一个1到100的值.然后前台再每隔很小的一段时间去请求这个值. 在AngularJS中,$http对象有3种状态,分别是success,progress,error,其中progress方法就会在success方法调用之前(也就是上传完成之前),不断地调用.而我们要做的就是在progress中在添加一个请求,去后台拿我们设置在session
-
AngularJs bootstrap详解及示例代码
AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 本文用于解释Angular初始化的过程,以及如何在你有需要的时候对Angular进行手工初始化. 二.Angular <script> 标签 本例用于展示如何通过推荐的路径整合Angular,实现自动初始化. <!doctype html> <html xmlns:ng=&qu