众所周知鸿蒙 JS 框架是非常轻量级的 MVVM 模式。通过使用和 Vue2 相似的属性劫持技术实现了响应式系统。
学习鸿蒙很长时间了，想写一个 demo 进行练练手，就选择开发这个仿苹果计算器程序。
先看效果图：
话不多说，上代码
hml：
css：
.container { flex-direction: column; background-color: #010101; height:100%; width:100%; }
.header{ height:36%; width:100%; align-items: flex-end; padding:2px 20px 2px 10px; } .keyboard{ height:64%; width:100%; padding:2px 10px; flex-wrap: wrap; } .outputText,.outputTextSmall{ width:100%; height:100px; color:#FFFFFF; text-align: end; } .outputText{ font-size:80px; } .outputTextSmall{ font-size:58px; } .keys,.zeroKeys,.operatorKeys-top,.operatorKeys-right{ width:74px; height:74px; justify-content: center; align-items: center; border-radius:74px; margin:10px 5px; } .keys-nubmer,.zeroKeys{ background-color:#333333; } .zeroKeys{ width:158px; } .operatorKeys-top{ background-color: #a4a4a4; } .operatorKeys-right{ background-color: #f79f31; } .keys:active,.zeroKeys:active{ background-color: #737373; } .keys text,.zeroKeys text,.operatorKeys-right text{ font-size:42px; color: #FFFFFF; } .operatorKeys-top text{ font-size:36px; color: #010101; } .operatorKeys-top:active{ background-color: #d9d9d9; } .operatorKeys-right:active{ background-color: #f5c891; }
js：
import {math} from “../../common/js/utils.js”; export default { data: { output:”0″, outputClassName:”outputText”, cache:[],//记录输入内容 keyArr:[“AC”,”+/-“,”%”,”÷”,”7″,”8″,”9″,”×”,”4″,”5″,”6″,”-“,”1″,”2″,”3″,”+”,”0″,”.”,”=”], reOper:””,//记录点击的运算符 reStr1:””,//记录第一次输入内容 reStr2:””,//记录点击运算符后的内容 bool:false//防止第二次输入内容时内容清空 }, onInit(){ this.$watch(“output”,”watchOutPut”) }, onclickOper(item){ if(item == “AC”){ this.clearComput(); } else if(item == “+” || item == “-” || item == “×” || item == “÷”){ this.reOper = item; this.reStr1 = this.output; if(this.cache.length > 0){ this.startCompute(); } this.cache.push(this.reStr1); } else if(item == “+/-“){ this.output = “-“+this.output; } else if(item == “%”){ this.output = math.accDiv(this.output,100); } else if(item == “=”){ this.reStr2 = this.output; this.cache.push(this.reStr2); this.startCompute(); } }, onclickNubmer(item){ if(this.cache.length > 0 && !this.bool){ this.output = “0”; this.bool = true; } if(this.output == “0” && item != “.”){ this.output = item; } else if(item == “.”){ if(this.output.indexOf(“.”) == -1){ if(this.output == “0”){ this.output = “0.” } else { this.output += item; } } } else { if(this.output.length < 10){ this.output += item; } } }, watchOutPut(nVal){ if(nVal.length > 7 && nVal.length< 10){ this.outputClassName = “outputTextSmall”; } else { this.outputClassName = “outputText”; } }, startCompute(){ switch (this.reOper) { case “+”: this.output = math.accAdd(this.reStr1,this.reStr2); this.reStr1 = this.output; break; case “-“: this.output = math.accSub(this.reStr1,this.reStr2); this.reStr1 = this.output; break; case “×”: this.output = math.accMul(this.reStr1,this.reStr2); this.reStr1 = this.output; break; case “÷”: this.output = math.accDiv(this.reStr1,this.reStr2); this.reStr1 = this.output; break; default: break; } }, clearComput(){ this.output = “0”; this.reOper = “”; this.reStr1 = “”; this.reStr2 = “”; this.cache = []; this.bool = false; } }
utils.js：
class MathCalss { //js精准除法函数 accDiv(arg1, arg2){ let t1 = 0, t2 = 0, r1, r2; try { t1 = arg1.toString().split(.)[1].length; } catch (e) {} try { t2 = arg2.toString().split(.)[1].length; } catch (e) {} r1 = Number(arg1.toString().replace(., )); r2 = Number(arg2.toString().replace(., )); return (r1 / r2) * Math.pow(10, t2 – t1); }
//js精准加法函数 accAdd(arg1, arg2) { var r1, r2, m, c; try { r1 = arg1.toString().split(“.”)[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(“.”)[1].length; } catch (e) { r2 = 0; } c = Math.abs(r1 – r2); m = Math.pow(10, Math.max(r1, r2)); if (c > 0) { var cm = Math.pow(10, c); if (r1 > r2) { arg1 = Number(arg1.toString().replace(“.”, “”)); arg2 = Number(arg2.toString().replace(“.”, “”)) cm; } else { arg1 = Number(arg1.toString().replace(“.”, “”)) cm; arg2 = Number(arg2.toString().replace(“.”, “”)); } } else { arg1 = Number(arg1.toString().replace(“.”, “”)); arg2 = Number(arg2.toString().replace(“.”, “”)); } return (arg1 + arg2) / m; } //js精准减法函数 accSub(arg1, arg2) { let r1, r2, m, n; try { r1 = arg1.toString().split(.)[1].length; } catch (e) { r1 = 0; } try { r2 = arg2.toString().split(.)[1].length; } catch (e) { r2 = 0; } m = Math.pow(10, Math.max(r1, r2)); //动态控制精度长度 n = r1 >= r2 ? r1 : r2; return (arg1 m – arg2 m) / m; } //js精准乘法函数 accMul(arg1, arg2) { var m = 0, s1 = arg1.toString(), s2 = arg2.toString(); try { m += s1.split(“.”)[1].length; } catch (e) { } try { m += s2.split(“.”)[1].length; } catch (e) { } return Number(s1.replace(“.”, “”)) * Number(s2.replace(“.”, “”)) / Math.pow(10, m); } }
export var math = new MathCalss();
为了解决浮点数计算失准问题，我使用一些解决计算失准的函数可供大家参考。
来源：鸿蒙技术社区
