基于基于AngularJS实现实现iOS8自带的计算器自带的计算器
的主要内容是使用angularjs实现一个计算器,是一个仿iOS8风格的计算器,功能基本和iOS自带的计算器是一
致的。有需要的朋友们可以参考借鉴。
前言前言
首先创建angularjs的基本项目就不说了,最好是利用yeoman这个脚手架工具直接生成,如果没有该环境的,当然也可以通过自
行下载angularjs的文件引入项目。
实例详解实例详解
main.js是项目的主要js文件,所有的js都写在这个文件中,初始化之后,该文件的js代码如下
angular
.module('calculatorApp', [
'ngAnimate',
'ngCookies',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch'
])
.controller('MainCtrl', function ($scope) {
$scope.result="";
$scope.data={
"1":["AC","+/-","%","÷"],
"2":["7","8","9","×"],
"3":["4","5","6","-"],
"4":["1","2","3","+"],
"5":["0",".","="]
};
});
这里的result是用来双向绑定显示运算结果的,data为计算器键盘上的数字和符号。
该项目相关的所有该项目相关的所有css代码如下:代码如下:
*{
margin:0;
padding:0;
}
body {
padding-top: 20px;
padding-bottom: 20px;
}
h1{
text-align:center;
color:#3385ff;
}
.main{
margin:20px auto;
border:1px solid #202020;
border-bottom: none;
width:60%;
height:600px;
}
.result{
display: block;
width: 100%;
height: 30%;
background:#202020;
box-sizing: border-box;
border:none;
padding: 0;
margin: 0;
resize: none;
color: #fff;
font-size: 80px;
text-align: right;
line-height: 270px;
overflow: hidden;
background-clip: border-box;
}