【无标题】
HarmonyOS - 简易的计算器实现
本计算器是仿造windows系统实现的,实现了基本的功能:四则运算,清除,退位,小数点,正负号功能。
效果展示
gif)]
效果及坑点
1.+ - * / 五种符号不能开头输入,而且不能出现连续的符号 ,除此之外 ,不能连续输入两次及以上的符号。
2.一个0开头后面不能出现数字,出现NaN(例如0/0)后的逻辑处理或者是计算结果出现别的string字符需要立即自动消失。
3.运算表达式不能直接使用eval方法求值,在计算逻辑中只做两个数的单次运算,那么再FA中是否有可以直接返回复合运算结果的方法,有待继续学习发现。
4.运算 表达式字符串转数组,以运算符号拆分,拿到两个数进行单次运算得到结果,这个拆分也可以用两个变量赋值运算。
字符串的拆分截取中,replace()方法,原replace()方法中的第一个参数正则表达式在 FA中没生效,所以在这里替换使用slice()方法截取。
5.if else 语句就是判断选择的是什么种类的运算符号,从而进行对应的运 算, 其中的parseInt的作用是解析一个字符串,并返回一个整数,文本框双向绑定赋结果。
代码展示
html代码
<div class="container"> <text class="title"> 计算器 </text> <input class="inputBox" ref="inputnum">{{iptValue}} </input> <div class="numBox"> <div class="garyBox"> <text for="{{(index, item) in arr}}" if = "item.tool === 'num' " @click="numFn(item.value)" class="bc-color"> {{ item.value }} </text> <text for="{{(index, item) in arr}}" if = "item.tool === 'dot' " @click="dot(item.value)" class="bc-color"> {{ item.value }} </text> </div> <div class="yellowBox"> <text for="{{(index, item) in arr}}" if = "item.tool === 'com'" @click="comFn(item.value)" class="bc-colora"> {{ item.value }} </text> <text for="{{(index, item) in arr}}" if = "item.tool === 'clear'" @click="clearFn" class="bc-colora"> {{ item.value }} </text> <text for="{{(index, item) in arr}}" if = "item.tool === 'del'" @click="deleteFn()" class="bc-colora"> {{ item.value }} </text> <text for="{{(index, item) in arr}}" if = "item.tool === 'equal'" @click="equal" class="bc-colora"> {{ item.value }} </text> </div> </div></div>#### js代码```jsexport default { data: { iptValue:'', havenum:false, tool:'', arr:[ {id:1, value:'7',tool:'num'}, {id:2, value:'8' ,tool:'num'}, {id:3, value:'9' ,tool:'num'}, {id:4, value:'del',tool:'del'}, {id:5, value:'C',tool:'clear'}, {id:6, value:'4',tool:'num'}, {id:7, value:'5' ,tool:'num'}, {id:8, value:'6' ,tool:'num'}, {id:9, value:'*',tool:'com'}, {id:10, value:'/',tool:'com'}, {id:11, value:'1',tool:'num'}, {id:12, value:'2' ,tool:'num'}, {id:13, value:'3' ,tool:'num'}, {id:14, value:'+',tool:'com'}, {id:15, value:'-',tool:'com'}, {id:16, value:'0',tool:'num'}, {id:17, value:'00' ,tool:'num'}, {id:18, value:'.' ,tool:'dot'}, {id:19, value:'%',tool:'com'}, {id:20, value:'=',tool:'equal'}, ], }, //数字 numFn(val){ //初始值为不能为0 this.iptValue = this.iptValue === '0'? '' :this.iptValue; //输入框的数字拼接 this.iptValue += this.tool ? this.tool + val : val; this.tool = ""; //数字标杆 禁止连续点击符号 this.havenum = true; }, //运算符 comFn(val){ this.commonFunc(val) }, commonFunc(val) { let arr = []; let flag = false; //遍历拿到运算符 for(let i = 0; i < this.iptValue.length; i++) { if (isNaN(parseInt(this.iptValue[i]))) { if (this.iptValue.length - 1 !== i) { flag = true; this.tool = this.iptValue[i]; } } } //判断存在运算符 并且有数字运算 if (flag || !this.iptValue.length) { arr = this.iptValue.split(this.tool); switch(this.tool) { case "*" : arr.length && arr[1] !== undefined ? this.iptValue = (Number(arr[0]) * Number(arr[1])).toString() : arr[0]; break; case "+" : arr.length && arr[1] !== undefined ? this.iptValue = (Number(arr[0]) + Number(arr[1])).toString() : arr[0]; break; case "-" : arr.length && arr[1] !== undefined ? this.iptValue = (Number(arr[0]) - Number(arr[1])).toString() : arr[0]; break; case "/" : arr.length && arr[1] !== undefined ? this.iptValue = (Number(arr[0]) / Number(arr[1])).toString() : arr[0]; break; case "%" : arr.length && arr[1] !== undefined ? this.iptValue = (Number(arr[0]) % Number(arr[1])).toString() : arr[0]; break; } this.tool = val; } else { if (isNaN(parseInt(this.iptValue[this.iptValue.length - 1]))) { this.iptValue = this.iptValue.slice(0, this.iptValue.length - 1) this.tool = val } else { this.iptValue += val; this.tool = "" } } }, //删除 deleteFn(){ this.iptValue = this.iptValue.slice(0,this.iptValue.length-1); }, //清空 clearFn(){ this.iptValue = ''; this.tool = "" }, //小数点 dot(val){ if(this.havenum){ this.iptValue += val; this.havenum = false; } }, //等于 equal(){ this.commonFunc(); }}``css属性API参考:| border-radius | <length> | - | border-radius属性设置元素的外边框圆角半径。设置border-radius时不能单独设置某一个方向的border-[left\|top\|right\|bottom]-width,border-[left\|top\|right\|bottom]-color ,border-[left\|top\|right\|bottom]-style,如果要设置color、width和style,需要将四个方向一起设置(border-width、border-color、border-style)。说明顺序为左下、右下、左上和右上。 || ----------------------------------------- | ----------------- | ---- | ------------------------------------------------------------ || border-[top\|bottom]-[left\|right]-radius | <length> | - | 分别设置左上,右上,右下和左下四个角的圆角半径。 || background | <linear-gradient> | - | 仅支持设置[渐变样式](https://developer.harmonyos.com/cn/docs/documentation/doc-references/js-components-common-gradient-0000000000611473),与background-color、background-image不兼容。 || background-color | <color> | - | 设置背景颜色。 |