开发一个鸿蒙版仿苹果计算器教程.附代码

众所周知鸿蒙 JS 框架是非常轻量级的 MVVM 模式。通过使用和 Vue2 相似的属性劫持技术实现了响应式系统。

学习鸿蒙很长时间了，想写一个 demo 进行练练手，就选择开发这个仿苹果计算器程序。

先看效果图：

话不多说，上代码

hml：

<divclass="container"><divclass="header"><textclass="{{outputClassName}}">{{output}}text>div><divclass="keyboard"><blockfor="{{keyArr}}"><divif="{{$item=='0'}}"class="zeroKeys"onclick="onclickNubmer({{$item}})"><text>{{$item}}text>div><divelif="{{$item=='AC'||$item=='+/-'||$item=='%'}}"class="operatorKeys-top"onclick="onclickOper({{$item}})"><text>{{$item}}text>div><divelif="{{$item=='÷'||$item=='×'||$item=='-'||$item=='+'||$item=='='}}"class="operatorKeys-right"onclick="onclickOper({{$item}})"><text>{{$item}}text>div><divelseclass="keyskeys-nubmer"onclick="onclickNubmer({{$item}})"><text>{{$item}}text>div>block>div>div>

css：

.container{flex-direction:column;background-color:#010101;height:100%;width:100%;}.header{height:36%;width:100%;align-items:flex-end;padding:2px20px2px10px;}.keyboard{height:64%;width:100%;padding:2px10px;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:10px5px;}.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;}.keystext,.zeroKeystext,.operatorKeys-righttext{font-size:42px;color:#FFFFFF;}.operatorKeys-toptext{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";exportdefault{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();}elseif(item=="+"||item=="-"||item=="×"||item=="÷"){this.reOper=item;this.reStr1=this.output;if(this.cache.length>0){this.startCompute();}this.cache.push(this.reStr1);}elseif(item=="+/-"){this.output="-"+this.output;}elseif(item=="%"){this.output=math.accDiv(this.output,100);}elseif(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;}elseif(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：

classMathCalss{//js精准除法函数accDiv(arg1,arg2){lett1=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){varr1,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){varcm=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){letr1,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){varm=0,s1=arg1.toString(),s2=arg2.toString();try{m+=s1.split(".")[1].length;}catch(e){}try{m+=s2.split(".")[1].length;}catch(e){}returnNumber(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m);}}exportvarmath=newMathCalss();

为了解决浮点数计算失准问题，我使用一些解决计算失准的函数可供大家参考。编辑：jq

计算器属性教程函数

免责声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕。