HarmonyOS应用开发:鸿蒙JS实战,计算器功能开发!
51CTO 开源基础软件社区
几天没有更新了,最近上班有点忙,没有及时更新一些常用知识点鉴于之前整理的都是一些原理知识点,大部分描述比较多,突然想到做一个小项目,看还没有鸿蒙js实现计算器的项目,就用半个小时考虑做了一个计算器。
由于时间有限,目前是基本的计算功能,后续会优化成连续计算和功能更全面。
每天学习一点点。
场景:
通过动态设置按钮组件button实现计算器的键盘,通过文本text显示计算的表达书,可以计算+,-,*,/,可以一个一个移除,可以重置等。
下面我们开始今天的文章,还是老规矩,通过如下几点来说:
1,实现思路 2,代码解析 3,实现效果 3,总结
一、实现思路
计算器的键盘,本来是想使用grid的 但是有一些默认属性不好控制,等后续组件完善了在做优化,目前grid适合一些均衡布局,通过监听计算符号添加判断逻辑,计算结果也是通过添加的计算类型进行计算,目前支持一级计算,后面做连续计算。
二、代码解析
子组件:
1、hml文件
实用了四个for循环实现了键盘效果,后面想了一下其实一个就能搞定,动态换行就行,时间有限后续优化(总感觉计算器挺简单,其实做起来还需要点时间)
<div class="container"> <text class="input-content">{{inputcontent}}</text> <div class="menu-content"> <div class="caluater" for="{{ caluater }}" > <button class="content" onclick="calculatorClick({{ $item.id }})">{{ $item.id }}</button> </div> </div> <div class="menu-content"> <div class="caluater" for="{{ caluater1 }}"> <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button> </div> </div> <div class="menu-content"> <div class="caluater" for="{{ caluater2 }}"> <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button> </div> </div> <div class="list2-content"> <div class="list3-content"> <div class="list2-content"> <div class="caluater" for="{{ caluater3 }}"> <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button> </div> </div> <div class="list2-content"> <div class="caluater" for="{{ caluater4 }}"> <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button> </div> </div> </div> <button class="equals" onclick="calculatorResult">=</button> </div> </div>
2、css文件
样式比较简单,主要控制键盘和表达式文本的颜色和大小。
.container { flex-direction: column; justify-content: flex-end; align-items: flex-end; width: 100%; } .input-content{ background-color: #00ffffff; text-align: right; font-size: 25px; padding: 10px; font-weight: bold; } .menu-content{ width: 100%; background-color: brown; allow-scale: true; } .caluater { flex-direction: row; width: 100%; height: 70px; background-color: #00ffffff; margin-left: 5px; margin-right: 5px; margin-top: 10px; } .content{ font-size: 30px; font-weight: bold; radius: 10px; width: 100%; height: 100%; text-color: #007EFF; background-color: #A8CCFB; } .content2{ font-size: 30px; font-weight: bold; radius: 10px; width: 100%; height: 100%; text-color: #000000; background-color: #dddcdc; } .list2-content{ flex-direction: row; justify-content: center; align-items: center; background-color: brown; } .list3-content{ flex-direction: column; margin-bottom: 10px; } .equals{ width: 30%; height: 150px; font-size: 30px; font-weight: bold; radius: 10px; margin-left: 5px; margin-right: 5px; }
3、js文件
js中主要实现逻辑,请看具体计算的判断。
import prompt from '@system.prompt'; export default { data: { title: "", inputcontent: "", number1: "", number2: "", type: "", caluater: [ { 'id': "C", }, { 'id': "÷", }, { 'id': "×", }, { 'id': "←", } ], caluater1:[ { 'id': "7", }, { 'id': "8", }, { 'id': "9", }, { 'id': "+", } ], caluater2:[ { 'id': "4", }, { 'id': "5", }, { 'id': "6", }, { 'id': "-", } ], caluater3:[ { 'id': "1", }, { 'id': "2", }, { 'id': "3", } ], caluater4:[ { 'id': "%", }, { 'id': "0", }, { 'id': ".", } ] }, onInit() { }, calculatorClick(result){ this.inputcontent = this.inputcontent+""; let str = this.inputcontent .substring(this.inputcontent.length-1, this.inputcontent.length); switch(result) { case "←": if(this.inputcontent.length > 0) { let str = this.inputcontent .substring(0, this.inputcontent.length - 1); this.inputcontent = str; } break; case "C": this.inputcontent = ""; break; case "+": this.calcula(str,result,"+"); break; case "-": this.calcula(str,result,"-"); break; case "×": this.calcula(str,result,"×"); break; case "÷": this.calcula(str,result,"÷"); break; case ".": if(this.inputcontent.length > 0 && str != ".") { this.inputcontent += result; } break; default: this.inputcontent += result; break; } }, calcula(str,result,cla){ if(this.inputcontent.length > 0 && str != "+" && str != "-" && str != "×" && str != "÷") { this.type = cla; this.inputcontent += result; } else { this.calculatorResult(); } }, calculatorResult(){// 计算结果 var temp = this.inputcontent.split(this.type); console.log("this.inputcontent = "+this.inputcontent) let str = this.inputcontent .substring(this.inputcontent.length-1, this.inputcontent.length); console.log("this.type = "+this.type) if (this.type == "+") { // 加法计算 if(temp.length > 1) { console.log("temp = "+temp) var num1 = parseFloat(temp[0]); var num2 = parseFloat(temp[1]); console.log("num1 = "+num1) console.log("num2 = "+num2) console.log("str = "+str) if(str != "+") { this.inputcontent = num1 + num2; this.type = ""; } } } else if(this.type == "-") { // 减法计算 if(temp.length > 1) { var num1 = parseFloat(temp[0]); var num2 = parseFloat(temp[1]); if(str != "-") { this.inputcontent = num1 - num2; this.type = ""; } } } else if(this.type == "×") { // 乘法计算 if(temp.length > 1) { var num1 = parseFloat(temp[0]); var num2 = parseFloat(temp[1]); if(str != "×") { this.inputcontent = num1 * num2; this.type = ""; } } } else if(this.type == "÷") { // 除法计算 if(temp.length > 1) { var num1 = parseFloat(temp[0]); var num2 = parseFloat(temp[1]); if(str != "÷") { this.inputcontent = num1 / num2; this.type = ""; } } } } }
为了目前的单一计算,现在做了不少的判断,后续做连续计算的时候会有改动,但是目前正常计算没有问题,期待后续更新。
三、实现效果
四、总结
开发计算器最主要的是连续计算,连续计算需要添加计算优先级逻辑,后续考虑通过遍历来判断里面的计算。
计算器界面开发通过常用组件就能实现,实现方式可以自己定。
在开发中验证了NaN,这个空的判断很多方式无效的,他是针对Number做的判断。
51CTO 开源基础软件社区
「其他文章」
- 使用 Podman Desktop 在 Fedora Linux 上管理容器
- 你是怎么在 Linux 干掉进程的?
- 玩转内核链表Llist_Head,教你管理不同类型节点的实现
- Fedora 37 可以测试了,Linux 之父日常操作系统带来 GNOME 43
- Windows 12来了!原来又是设计师脑洞大开的杰作
- 软件开发人员的理想 Linux 发行版
- 你应该知道的 22 个基本的 Linux 网络命令
- 谷歌为Chrome浏览器今年的第五个 "0 day漏洞" 打补丁
- 基于Web浏览器对音视频编解码的探索和实践
- 61秒,摸透Linux的健康状态!
- HarmonyOS应用开发:鸿蒙JS实战,计算器功能开发!
- Linux 怎么防止 ssh 被暴力破解
- 比各种清理大师靠谱!Edge浏览器新技术大幅提速
- 最近版 Opera 引发 Windows 可靠性监视器错乱
- 修复 Ubuntu 中的 “cannot find signatures with metadata for snap” 错误
- 不想升级Windows 11?教你坚守Windows 10的正确姿势
- 这六个 VS Code 主题你不应该错过
- 要想Linux命令行玩的溜,还得apropos!此文运维必看
- Linux 之父发话:Rust 将合并到 Linux 5.20 内核中去
- Ubuntu Core 22 来了,适用于物联网和边缘设备