基于angularJs和Bootstrap的简易计算器

最新推荐文章于 2022-07-21 19:11:50 发布

原创最新推荐文章于 2022-07-21 19:11:50 发布

· 833 阅读

3 ·

版权

文章标签：

#bootstrap #html #angularjs

Web前端专栏收录该内容

3 篇文章

订阅专栏

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

效果图展示: