前言

本文主要介绍苹果计算器项目中计算功能的实现

  • 在前面的文章中已经实现了输入,动态计算字体大小,以及计算器的布局
  • 本文主要介绍计算功能的实现

正文

实现/清空/改变正负/除以100

inputText 已经实现了,接下来实现 operator 的功能,operator 方法在之前的文章中已经定义好了,所以本次就直接在里面写逻辑就好了:

  • 首先,来实现 清空改变正负除以100
operator(params) {
switch (params) {
case "clear":
// 清空
this.showValue = "0";
break;
case "opposite":
// 改变正负
// 负负得正
this.showValue = -this.showValue;
break;
case "percent":
// 除以 100
this.showValue = this.showValue / 100;
break;
case "":
break;
}
},

代码写完之后,来看一下效果:

在本次运行中,发现了很多问题,但是我们一一来解决就好,首选来看除以 100,这个小数位错误的问题,其实是精度丢失。

丢失精度了我这里不测试了,大家可以将除以 100 的结果用 console.log 打印到控制台看一下,我这里直接给出解决方案,我在网上找了一个 a-calc 的库,用它,就可以帮我解决这个问题。

解决精度丢失问题

  • 使用 a-calc,这里涉及到一个知识点就是在 UniApp 中安装外部库
  • 方法很简单,首先找到自己的项目文件夹目录,可以像我一样,如下图

打开资源管理器之后:

再弹出来的终端当中输入如下安装指令即可进行安装:

npm i a-calc

安装成功之后我们就可以进行直接使用了,使用方式可以参考官网:https://www.npmjs.com/package/a-calc

使用 a-calc

导入 a-calc:

import {calc, fmt} from "a-calc"

然后使用 calc 包裹一下,就可以解决精度丢失的问题了, calc 的参数是字符串,所以我们需要将 this.showValue 转换为字符串,代码如下:

this.showValue = calc(`${this.showValue} / 100`);

这样就可以解决精度丢失的问题了,来看一下效果:

实现计算操作

嗯,到这基本上解决完毕了,接下来来看加减乘除,首先来看一个做加减乘除之前所需要解决的问题,如下图:

我按下的是 23 + 65,应该在我按下 + 的时候将 23 记录下来,再将本次的运算符记录下来,然后再将 65 记录下来,最后再将 23 + 65 的结果记录下来,这样就可以了。

所以我还需要在改动一下代码,我分别新增了三个变量,分别是:

  • firstValue:第一个值
  • operatorType:运算符
  • secondValue:第二个值
  • firstValue 保存运算前面的数据,例如:1 + 2,保存 1
  • secondValue 保存运算后面的数据,例如:1 + 2,保存 2
  • operatorType 保存运算符,例如:1 + 2,保存 +

我在额外定义一个变量 isCaculate, 用来记录用户,是否点击过运算符。

firstValue: "",
secondValue: "",
operatorType: "",
isCaculate: false,

需要的内容都定义完毕之后,来改造一下代码,首先在 operator 方法中,计算操作符的时候,需要将 isCaculate 设置为 true,每次输入了运算符记录一下状态:

this.isCaculate = true;

然后在 inputText 方法中,需要判断一下,如果 isCaculatetrue,那么就将 firstValue 设置为 this.showValue,然后将 isCaculate 设置为 false,代码如下:

if (this.isCaculate) {
this.firstValue = this.showValue;
this.showValue = "0";
this.isCaculate = false;
}

运行一下,看一下效果:

很完美,接下来就是计算的逻辑了,首先来看 =, = 的 params 是 result 所以在 switch 处理一下 case 为 result 的情况, 因为这里设计到计算所以我单独抽取一个方法来完成这件事情,方法名叫 caculate,写到这我突然忘记一个事情就是要保存我们的运算符,所以我在 operator 方法中,将运算符保存到 operatorType 中,不能直接保存,而是在 default 中保存,

this.operatorType = params;

然后在 caculate 方法中,根据 operatorType 来判断是加减乘除,然后进行计算,代码如下:

caculate() {
switch (this.operatorType) {
case "plus":
this.showValue = calc(`${this.firstValue} + ${this.showValue}`);
break;
case "minus":
this.showValue = calc(`${this.firstValue} - ${this.showValue}`);
break;
case "multiply":
this.showValue = calc(`${this.firstValue} * ${this.showValue}`);
break;
case "divide":
this.showValue = calc(`${this.firstValue} / ${this.showValue}`);
break;
case "":
break;
}
},

计算逻辑写完之后,来看一下效果:

这里还有个效果需要实现一下就是,我首先输入 12 然后按 +,在输入 12,然后按 +,这时候我需要进行一次计算,因为我按了两次 +,所以在第二次按 + 的时候,需要将第一次的计算结果进行计算,所以我在 operator 方法中,需要判断一下,如果 firstValue 不为空,那么就调用 caculate 方法,在 default 分支调用 caculate 方法,代码如下:

if (this.firstValue != "") {
this.caculate();
}

  • 到这里,计算器的功能就已经实现完毕了
  • 后面在给大家介绍一下,将这个项目打包成网页/小程序/App

End

  • 如果你有任何问题或建议,欢迎在下方留言,我会尽快回复
  • 如果你觉得本文对你有帮助,欢迎点赞、收藏,你的支持是我写作的最大动力

【UniApp】-uni-app-项目计算功能(苹果计算器)的更多相关文章

  1. 面向对象课程 - 寒假第四次作业 - C++计算器项目计算部分

    C++计算器项目计算部分 零.项目源文件地址 地址:Calculator 2.0 一.项目信息相关 项 目 : Calculator 版 本 : 2 . 0 日 期 : 2016 . 4 . 14 实 ...

  2. 在UniApp的H5项目中,生成二维码和扫描二维码的操作处理

    在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作.二维码的生成,使用了JS文件wea ...

  3. Android------个人项目(歆语计算器)

    歆语混合计算器,触手可及,畅享运算,欢迎使用,支持4则混合运算, 可以同时加,减,乘,除,前提是计算格式要输入正确,提供便利的计算功能. apk下载地址: http://shouji.baidu.co ...

  4. 【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑(三)

    前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_el ...

  5. uni-app: 如何实现增量更新功能?

    都知道,很多APP都有增量更新功能,Uni APP也是在今年初,推出了增量更新功能,今天我们就来学习一波. 当然,很多应用市场为了防止开发者不经市场审核许可,给用户提供违法内容,对增量更新大多持排斥态 ...

  6. 多端开发之uniapp开发app

    最近在给f做一些工具app,学习了不少关于uniapp编写android应用的知识. 首先,App应用的创建的时候要选择项目类型为uniapp类型.最开始我选择的是h5+项目,这种项目就比较容易写成纯 ...

  7. APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点)

    APP测试点总结(功能,交互,死机崩溃状态分析,容易出错的检查点) 版权声明:本文为博主原创文章,未经博主允许不得转载. 最近涉足APP端测试,常见检查点总结如下:   一.业务方面: 1.  注册( ...

  8. 移动APP项目研发流程及版本规划(转)

    一个移动APP项目研发规模可大可小,但都离不开以下几个成员:产品经理.ui设计师.前端开发.后端开发.测试等.如何合理安排项目成员工作.确保项目顺利进行呢?一个清晰合理的项目研发流程控制很重要. 项目 ...

  9. 用户识别APP项目开发计划书

    用户识别APP项目开发计划书        项目介绍: 用户识别APP,通过在有限时间内引导用户A交互,提取用户的行为特征,然后将APP交给用户X(可能是A也可能是陌生人),在1分钟内引导X交互,判断 ...

  10. 移动app框架inoic功能研究

    原生移动app框架inoic功能研究 本篇只侧重框架提供的功能和能力的研究,请关注后续实际部署使用体验. 一.inoic是什么? inoic是一个可以使用Web技术以hybird方式开发移动app的前 ...

随机推荐

  1. freeswitch sofia协议栈调试

    概述 freeswitch是一款简单好用的VOIP开源软交换平台. fs内部使用sofia的sip协议栈,本文介绍如何调试跟踪sofia协议栈. 环境 centos:CentOS  release 7 ...

  2. 基于Python的HTTP代理爬虫开发初探

    前言 HTTP代理爬虫在爬取网页数据时,使用Python程序模拟客户端请求,同时使用HTTP代理服务器来隐藏客户端的真实IP地址.这样可以有效防止在爬取大量网页数据时被目标网站封禁IP地址. 以下是基 ...

  3. 彻底弄懂ip掩码中的网络地址、广播地址、主机地址

    本文为博主原创,转载请注明出处: 概念理解: IP掩码(或子网掩码)用于确定一个IP地址的网络部分和主机部分.它是一个32位的二进制数字,与IP地址做逻辑与运算,将IP地址划分为网络地址和主机地址两部 ...

  4. Python中的转义符\

    1.转义符 可以百度百科查询 2.Python中的转义符 我目前知道的Python中的转义符使用场景有两个:一个是字符串,一个是正则表达式 2.1.字符串的转义 2.1.1.反斜杠"\&qu ...

  5. Flink测试利器之DataGen初探

    什么是 Flinksql Flink SQL 是基于 Apache Calcite 的 SQL 解析器和优化器构建的,支持ANSI SQL 标准,允许使用标准的 SQL 语句来处理流式和批处理数据.通 ...

  6. PKCS#11:密码设备与应用程序的密码学接口

    密码学在信息安全中扮演着至关重要的角色.为了保护敏感信息.数字身份和网络通信的安全性,密码设备(如硬件安全模块HSM)与应用程序之间的安全通信和互操作性变得至关重要.PKCS#11(Public-Ke ...

  7. Amazon MSK 可靠性最佳实践

    1. Amazon MSK介绍 Kafka作为老牌的开源分布式事件流平台,已经广泛用于如数据集成,流处理,数据管道等各种应用中. 亚马逊云科技也于2019年2月推出了Apache Kafka的云托管版 ...

  8. 实战攻防演练--利用微软自带Certutil命令ByPassAV上传C2

    Certutil Certutil.exe是Windows操作系统中的合法程序,主要用于管理证书相关操作.它提供了转储和显示证书颁发机构(CA)的配置信息.配置证书服务.备份和还原CA组件,以及验证证 ...

  9. Linux运维技能图谱

    前言 该技能图谱依个人经验绘制,不适用于所有运维岗位.对于刚入行的从业者,也不需要按照图谱全学一遍,应该根据岗位工作内容来学习.有些技术我也不会,但作为一个选项我也写进去了,比如容器运行时有Docke ...

  10. 巅峰对决:英伟达 V100、A100/800、H100/800 GPU 对比

    近期,不论是国外的 ChatGPT,还是国内诸多的大模型,让 AIGC 的市场一片爆火.而在 AIGC 的种种智能表现背后,均来自于堪称天文数字的算力支持.以 ChatGPT 为例,据微软高管透露,为 ...