基于基于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;
}
资源评论
weixin_38698927
- 粉丝: 7
- 资源: 980
最新资源
- 基于 Ant 的 Java 项目示例.zip
- 各种字符串相似度和距离算法的实现Levenshtein、Jaro-winkler、n-Gram、Q-Gram、Jaccard index、最长公共子序列编辑距离、余弦相似度…….zip
- 运用python生成的跳跃的爱心
- 包括用 Java 编写的程序 欢迎您在此做出贡献！.zip
- (源码)基于QT框架的学生管理系统.zip
- 功能齐全的 Java Socket.IO 客户端库，兼容 Socket.IO v1.0 及更高版本 .zip
- 功能性 javascript 研讨会 无需任何库（即无需下划线），只需 ES5 .zip
- 分享Java相关的东西 - Java安全漫谈笔记相关内容.zip
- 具有适合 Java 应用程序的顺序定义的 Cloud Native Buildpack.zip
- 网络建设运维资料库职业
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
