Angular JS实现简单计算器

最新推荐文章于 2019-12-13 17:13:10 发布
最新推荐文章于 2019-12-13 17:13:10 发布
阅读量1k 收藏 1
点赞数 1
分类专栏： 项目实战 文章标签： Angular JS 简易计算器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41251963/article/details/82840891
版权

设计一个程序：实现一个简单的计算器的设计
要求：
1、设计web前端界面
2、 掌握基本的Angular-js开发过程
3、 掌握熟悉Angular-js开发环境的配置

calc.js

var app = angular.module("calculator", []);
        app.controller("FirstController", function ($scope) {
                $scope.textView = "0";
                $scope.fuhao = "";
                $scope.firstNumber = "";
                $scope.secondNumber = "";
                $scope.doEmpty = function () {
                    $scope.textView = "0";
                    $scope.fuhao = "";
                    $scope.firstNumber = "";
                    $scope.secondNumber = "";
                }
                //点击正负数时
                $scope.valiteNumber = function () {
                    if ($scope.firstNumber == "") {//什么都没有时
                        $scope.firstNumber = "-";
                        return;
                    }
                    if ($scope.firstNumber != "" && $scope.fuhao == "") {
                        if ($scope.firstNumber / 1 > 0) {
                            $scope.firstNumber = "-" + $scope.firstNumber;
                        } else {
                            $scope.firstNumber = $scope.firstNumber.substring(1, $scope.firstNumber.length);
                        }
                        $scope.textView = $scope.firstNumber;
                        return;
                    }
                    if ($scope.fuhao != "") {
                        if ($scope.secondNumber == "") {
                            $scope.secondNumber = "-";
                            $scope.textView = $scope.secondNumber;
                            return;
                        }
                        if ($scope.secondNumber / 1 > 0) {
                            $scope.secondNumber = "-" + $scope.secondNumber;
                        } else {
                            $scope.secondNumber = $scope.secondNumber.substring(1, $scope.secondNumber.length);
                        }
                        $scope.textView = $scope.secondNumber;
                        return;
                    }

                }

                //点击运算符号
                $scope.addChar = function (theChar) {
                    if ($scope.firstNumber != "" && $scope.fuhao == "") {
                        if ($scope.firstNumber == "." || $scope.firstNumber == "-") {
                            return;
                        }
                        $scope.fuhao = theChar;
                        return;
                    }
                    if ($scope.firstNumber != "" && $scope.fuhao != "" && $scope.secondNumber == "") {
                        $scope.fuhao = theChar;
                        return;
                    }
                    if ($scope.firstNumber != "" && $scope.fuhao != "" && $scope.secondNumber != "") {
                        if ($scope.secondNumber == "." || $scope.secondNumber == "-") {
                            return;
                        }
                        if ($scope.fuhao == "÷" && $scope.secondNumber == "0") {
                            return;
                        }
                        $scope.doCount();
                        $scope.fuhao = theChar;
                        return;
                    }
                    // $scope.textView = $scope.firstNumber + $scope.fuhao + $scope.secondNumber;

                }    //addChar

                //删除
                $scope.deleteOneChar = function () {
                    if ($scope.secondNumber != "") {
                        $scope.secondNumber = $scope.secondNumber.substring(0, $scope.secondNumber.length - 1);
                        $scope.textView = $scope.secondNumber;
                        return;
                    }
                    if ($scope.fuhao != "") {
                        $scope.fuhao = "";
                        $scope.textView = $scope.firstNumber;
                        return;
                    }
                    if ($scope.firstNumber != "") {
                        $scope.firstNumber = $scope.firstNumber.substring(0, $scope.firstNumber.length - 1);
                        if ($scope.firstNumber == "") {
                            $scope.textView = "0";
                            return;
                        }
                        $scope.textView = $scope.firstNumber;
                        return;
                    }
                    $scope.textView = 0;
                }//deleteOneChar

                //添加数字
                $scope.addNumber = function (text) {
                    if ($scope.fuhao == "") {
                        if (text == "." && $scope.firstNumber.indexOf(".") > -1) {
                            return;
                        }
                        $scope.firstNumber += text;
                        $scope.textView = $scope.firstNumber;
                    } else {
                        if (text == "." && $scope.secondNumber.indexOf(".") > -1) {
                            return;
                        }
                        $scope.secondNumber += text;
                        $scope.textView = $scope.secondNumber;
                    }
                }

                //计算
                $scope.doCount = function () {
                    if ($scope.firstNumber == "" || $scope.fuhao == "" || $scope.secondNumber == "") {
                        return;
                    }
                    if ($scope.firstNumber != "") {
                        if ($scope.firstNumber == "." || $scope.firstNumber == "-") {
                            return;
                        }
                    }
                    if ($scope.secondNumber != "") {
                        if ($scope.secondNumber == "." || $scope.secondNumber == "-") {
                            return;
                        }
                    }
                    var fNumber = $scope.firstNumber / 1;
                    var sNumber = $scope.secondNumber / 1;
                    var result = 0;
                    switch ($scope.fuhao) {
                        case "×":
                            result = fNumber * sNumber;
                            break;
                        case "÷":
                            if (sNumber == 0) {
                                return;
                            }
                            result = fNumber / sNumber;
                            break;
                        case "+":
                            result = fNumber + sNumber;
                            break;
                        case "-":
                            result = fNumber - sNumber;
                            break;
                    }
                    if ($scope.fuhao == "÷" && sNumber == 1) {

                    } else {
                        var temp = result + "";
                        if (temp.indexOf('.') > -1 && temp.split('.')[1].length >= 8) {
                            result = result.toFixed(8);
                        }
                    }
                    $scope.textView = result / 1 + "";
                    $scope.fuhao = "";
                    $scope.firstNumber = result / 1 + "";
                    $scope.secondNumber = "";
                }//doCount
            }
        );

index.html

<!DOCTYPE html>
<html ng-app="calculator">
	<head>
		<meta charset="utf-8" />
		<title>计算器</title>
		<style type="text/css">
            body{
                padding: 0;margin: 0;
                background-color:#49C593 ;
            }
            #calculator{
                position: absolute;
                width: 1200px;height: 620px;
                left: 50%;top: 50%;
                margin-left: -600px;
                margin-top: -310px;
            }
            #calculator #c_title {
                margin: auto;
                /*margin-left: 300px;*/
                width: 800px;
                height: 80px;
            }
            #calculator #c_title h2{
                text-align: center;
                font-size: 33px;font-family: "微软雅黑";color: #skyblue;
                line-height: 30px;
            }
            #c_text{
                width: 1000px;
                margin: auto;
            }
            #calculator #c_text #text{
                /*margin-left: 200px;*/
                padding-right: 10px;
                width: 1000px;
                height: 50px;
                font-size: 25px;font-family: "微软雅黑";color: #blue;
                text-align: right;border: 1px white;
                border: double 1px;
            }
            #calculator #c_value{
                width: 1080px;height: 408px;
                /*margin-left: 160px;*/
                margin: 20px auto;
            }
            #calculator #c_value ul{
                margin: 0;
            }
            #calculator #c_value ul li{
                margin: 10px;
                list-style: none;float: left;
                width: 180px;height: 80px;line-height: 80px;
                text-align: center;background-color: chartreuse;
                border: 1px solid black;
                font-size: 30px;font-family: "微软雅黑";color: red;
                box-shadow: 5px 5px 30px rgba(0,0,0,0.4);           
                -webkit-user-select: none;
                -ms-user-select: none;
                -moz-user-select: none;
            }
            #calculator #c_value ul li:active{
                background-color: white;
            }
            #calculator #c_value ul li:hover{
                opacity:0.8;
                cursor:pointer;
            }
            #calculator #c_value ul .c_blue{
                background-color: cornflowerblue;color: #000000;
            }
            #calculator #c_value ul .c_yellow{
                background-color: #f9f900;color: #000000;
            }
        </style>
 
<script src="https://cdn.bootcss.com/angular.js/1.6.7/angular.min.js"></script>

<script src="js/calc.js"></script>

	</head>
	<body>
        <div id="calculator" ng-controller="FirstController">
            <div id="c_title"><h2>计算器</h2></div>
            <div id="c_text">
                <input type="text" id="text" value="0" readonly="readonly"  ng-model="textView" disabled />
            </div>
            <div id="c_value">
                <ul>
                    <li ng-model="seven" ng-click="addNumber('7')">7</li>
                    <li ng-model="eight" ng-click="addNumber('8')">8</li>
                    <li ng-model="nine" ng-click="addNumber('9')">9</li>
                    <li class="c_blue" ng-model="delete" ng-click="deleteOneChar()">←</li>
                    <li class="c_blue" ng-model="empty" ng-click="doEmpty()">C</li>
                    <li ng-model="four" ng-click="addNumber('4')">4</li>
                    <li ng-model="five" ng-click="addNumber('5')">5</li>
                    <li ng-model="six" ng-click="addNumber('6')">6</li>
                    <li class="c_blue" ng-model="cheng" ng-click="addChar('×')">×</li>
                    <li class="c_blue" ng-model="chu" ng-click="addChar('÷')">÷</li>
                    <li ng-model="one" ng-click="addNumber('1')">1</li>
                    <li ng-model="two" ng-click="addNumber('2')">2</li>
                    <li ng-model="three" ng-click="addNumber('3')">3</li>
                    <li  class="c_blue" ng-model="jia" ng-click="addChar('+')">+</li>
                    <li class="c_blue" ng-model="jian" ng-click="addChar('-')">-</li>
                    <li ng-model="zero" ng-click="addNumber('0')">0</li>
                    <li ng-model="zero" ng-click="addNumber('00')">00</li>
                    <li ng-model="dot" ng-click="addNumber('.')">.</li>
                    <li class="c_blue">%</li>
                    <li  class="c_yellow" ng-model="dengyu" ng-click="doCount()">=</li>
                </ul>
            </div>
        </div>
    </body>


</html>

运行效果
在这里插入图片描述

乐亦亦乐
关注
专栏目录
Angular实现简单计算器
cf8833的博客
03-26 780
Angular实现简单计算器 step1: D:\vue\untitled2904\src\app\app.component.ts import {Component} from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { t
angularJs实现简单计算器
niqinge
01-12 1970
html> lang="en" class="buttonDiv"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/> 计算器 src="https://cdn.bootcss.com/angular.js/1.6.7
一个基于angularJS的工资计算器
aaa407217484的博客
03-13 310
先看界面： 其实在ng中最让人印象深刻的就是数据的双向绑定，在html中就完成了很多操作。大概用到的就是控制器视图服务等，没有分模块写控制器，代码如下： <html ng-app = "myApp"> <head> <title>工资计算器ng</title> <script src= "a...
基于angularJs和Bootstrap的简易计算器
08-12
基于angularJs和Bootstrap的简易计算器
AngularJS实战：简单计算
howard2005的专栏
02-24 634
在IntelliJ IDEA中安装AngularJS插件，通过在HTML文件中应用`ng-app`、`ng-model`和`ng-bind`指令，实现简易计算器应用的实时数据绑定。用户输入变化时，总价自动更新，直观展示了AngularJS框架下双向数据绑定与响应式编程的优势。
Angular-Shopping:用 Angular JS 构建的购物计算器
06-24
###Angular JS 中的购物计算器 这是一个用 Angular JS 构建的购物计算器，我在第一次介绍 Angular JS 后 15 分钟就构建了它。 CSS 由 Bootstrap 提供支持，代码是原生 Javascript（当然 AngularJS 文件除外）。 ###...
AngularJSCalculator:使用Angular.js制作的计算器
05-17
使用Angular.js制作的计算器 该计算器的灵感来自于本教程： : 我编辑了样式并添加了除法和乘法功能。 还编辑了文件结构以包括来自单独文件的脚本。 随意以任何您想使用的方式使用它。 您将需要angular.min.js使...
webcalc:用 Angular 编写的袖珍计算器模拟器
06-25
要求： 您需要节点，这是在 v0.10.28 中编写的，但其他版本也可以使用 你需要谷歌浏览器 建立： 克隆这个 repo sudo npm install -g bower grunt-cli cd进入项目 npm install bower install ...
AngularJS工资计算器
04-14
通过基于AngularJS实现简单的工资计算器，个人（月薪）含有税前工资、各项社会保险费、税后工资、纳税额等
AngularCalc:用Angular编写的计算器
03-25
这个项目“AngularCalc”是一个使用Angular实现的简单计算器，它利用了Angular的强大功能和TypeScript的类型安全性，提供了一个直观的用户界面来进行基本的数学运算。 **Angular基础知识** Angular是一个基于组件...
基于AngularJS实现的工资计算器实例
12-08
本文实例讲述了基于AngularJS实现的工资计算器。分享给大家供大家参考，具体如下： 先看界面： 其实在ng中最让人印象深刻的就是数据的双向绑定，在html中就完成了很多操作。大概用到的就是控制器视图服务等，没有分模块写控制器，代码如下： <html ng-app = "myApp"> <head> <title>工资计算器ng</title> [removed][removed] </head> <body> <div xss=removed> 税前工资：<input ng-model="sa
angularJS 内置计算器
qll_24的博客
10-28 501
{{exp}}={{$eval(exp)}} 使用AngularJS内置的eval对象,必须在前面加$字符,和js对象做区分
Angularjs进行数值相加，保留两位小数，toFixed使ng-change方法失效的解决办法
weixin_39433171的博客
02-27 2759
在2个ipnut框添加ng-change事件，使输入的值相加显示在第三个input框，但是使用了js的toFixed(2)方法后，ng-change方法就失效了，填写完数字后在清空值时，并不会进行重新计算，所以采用 Math.round(totalPrice * 10) / 10来代替， 如果时保留两位 Math.round(totalPrice * 100) / 100 先将所得的总价先乘以10...
AngularJS计算器实现
nbme的博客
08-17 847
价格计算器 数量： 价格： 总价： {{ quantity + price }} 在学习AngularJS 时发现 中可以上调下调数值，并不能输入与数值无关的变量 以前一直用的type=text,哎，真是见识短啊！！！
AngularJs实现简易的计算器
蒲小若的博客
10-06 2411
Title + - * / = // var show = document.getElementById("show"); angular.module("myApp",[]) .controll
AngularJS 简单加减乘除
吾爱的博客
10-16 2939
 第一种方法： &lt;div ng-app=""&gt; &lt;div&gt; &lt;!--文本--&gt; &lt;input type="number" ng-model="A" placeholder=" 输入数字1"&gt; {{a}}
JS实现简单计算器
weixin_41939212的博客
07-28 3907
JS实现简单计算器 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;
AngularJS工厂/服务实现一个计算器
u013677326的博客
10-28 1580
html代码 <div ng-controller="calcCtrl"> <select ng-model="type"> <option value="active">动态响应模式</option> <option value="static">手动点击模式</option> </select> <i
AngularJS路由实现-计算器、留言板、备忘录
浅浅の博客
12-13 252
统一步骤（引进css样式表和js） <head> <meta charset="UTF-8"> <script src="../js/angular.js"></script> <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css"/> &l...
Angular实现待办事项列表实战代码
本文档详细介绍了Angular框架中如何实现一个简单的待办事项列表(toDoList)功能。首先，让我们了解一下什么是待办事项列表。待办事项列表是一种管理个人或团队任务的方式，用户可以添加、编辑、标记完成状态、删除...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

乐亦亦乐

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值