眾所周知鴻蒙 JS 框架是非常輕量級的 MVVM 模式。通過使用和 Vue2 相似的屬性劫持技術(shù)實(shí)現(xiàn)了響應(yīng)式系統(tǒng)。

學(xué)習(xí)鴻蒙很長時間了，想寫一個 demo 進(jìn)行練練手，就選擇開發(fā)這個仿蘋果計算器程序。

話不多說，上代碼

<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:[],//記錄輸入內(nèi)容
keyArr:["AC","+/-","%","÷","7","8","9","×","4","5","6","-","1","2","3","+","0",".","="],
reOper:"",//記錄點(diǎn)擊的運(yùn)算符
reStr1:"",//記錄第一次輸入內(nèi)容
reStr2:"",//記錄點(diǎn)擊運(yùn)算符后的內(nèi)容
bool:false//防止第二次輸入內(nèi)容時內(nèi)容清空
},
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.length10){
this.output+=item;
}
}
},
watchOutPut(nVal){
if(nVal.length>7&&nVal.length10){
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精準(zhǔn)除法函數(shù)
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精準(zhǔn)加法函數(shù)
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精準(zhǔn)減法函數(shù)
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));
//動態(tài)控制精度長度
n=r1>=r2?r1:r2;
return(arg1*m-arg2*m)/m;
}
//js精準(zhǔn)乘法函數(shù)
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();