当前位置: 首页 > 科技观察

HarmonyOS应用开发:HarmonyJS实战,计算器功能开发!

时间:2023-03-13 09:15:50 科技观察

想了解更多开源,请访问:开源基础软件社区https://ost.51cto.com几天没更新了,还有我最近工作有点忙。及时更新一些常用的知识点。由于之前的合集都是一些理论知识点,所以大多都有较多的说明。突然想到做一个小项目。看到没有鸿蒙js实现计算器的项目,就想着半小时做一个。计算器。由于时间有限,目前是基础计算功能,后续会针对持续计算和更全面的功能进行优化。每天学一点点。场景:通过动态设置button组件button实现计算器的键盘,通过text文本显示计算表达式书,可以计算+,-,*,/,可以一一删除,可以重新设置等..开始今天的文章,还是老套路,通过以下几点:1.实现思路2,代码分析3,实现效果3,总结1,实现计算器的键盘,本来想用grid但是还有一些默认属性不好控制,会在后续组件完善的时候进行优化。目前,网格适用于一些平衡布局。通过监控计算符号添加判断逻辑,计算结果也通过添加的计算类型进行计算。目前支持一级计算,后续会进行连续计算。二、代码分析子组件:1、hml文件使用四个for循环实现键盘效果。想了想,还是可以的,动态换行就可以了,后续优化时间有限(总觉得计算器很简单,但实际做起来还是需要一些时间的起床){{inputcontent}}{{$item.id}}

{{$item.id}}
{{$item.id}}{{$item.id}}{{$item.id}}=2.css文件样式比较简单,主要控制键盘和表情文字颜色和大小.container{flex-direction:column;证明内容:flex-end;对齐项目:flex-end;宽度:100%;}.输入内容{背景颜色:#00ffffff;文本对齐:右;字体大小:25px;填充:10px;font-weight:bold;}.menu-content{width:100%;背景颜色:棕色;allow-scale:true;}.caluater{flex-direction:row;宽度:100%;高度:70px;背景色:#00ffffff;左边距:5px;右边距:5px;margin-top:10px;}.content{字体大小:30px;字体粗细:粗体;半径:10px;宽度:100%;高度:100%;文本颜色:#007EFF;背景颜色:#A8CCFB;}.content2{字体大小:30px;字体粗细:粗体;半径:10px;宽度:100%;高度:100%;文本颜色:#000000;背景颜色:#dddcdc;}.list2-content{flex-direction:row;证明内容:居中;对齐项目:居中;背景颜色:棕色;}.list3-content{flex-direction:colu锰;margin-bottom:10px;}.equals{宽度:30%;高度:150px;字体大小:30px;字体粗细:粗体;半径:10px;3.js文件主要实现js中的逻辑,具体计算判断请参考从'@system.prompt'导入提示;导出默认值{数据:{标题:“”,输入内容:“”,数字1:“”,数字2:“”,类型:“”,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+"";让str=this.inputcontent.substring(this.inputcontent.length-1,this.inputcontent.length);switch(result){case"←":if(this.inputcontent.length>0){letstr=this.inputcontent.substring(0,this.inputcontent.length-1);this.inputcontent=str;}休息;案例“C”:this.inputcontent=“”;休息;case"+":this.calcula(str,result,"+");休息;案例“-”:this.calcula(海峡,结果,“-”);休息;case"×":this.calcula(str,result,"×");休息;case"÷":this.calcula(str,result,"÷");休息;case".":if(this.inputcontent.length>0&&str!="."){this.inputcontent+=result;}休息;默认值:this.inputcontent+=result;休息;}},calcula(str,result,cla){if(this.inputcontent.length>0&&str!="+"&&str!="-"&&str!="×"&&str!="÷"){this.type=cla;this.inputcontent+=结果;}else{this.calculatorResult();}},calculatorResult(){//计算结果vartemp=this.inputcontent.split(this.type);console.log("this.inputcontent="+this.inputcontent)letstr=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)varnum1=parseFloat(temp[0]);varnum2=parseFloat(temp[1]);console.log("num1="+num1)console.log("num2="+num2)console.log("str="+str)if(str!="+"){this.inputcontent=num1+num2;this.type="";}}}elseif(this.type=="-"){//减法计算if(temp.length>1){varnum1=parseFloat(temp[0]);varnum2=parseFloat(temp[1]);if(str!="-"){this.inputcontent=num1-num2;this.type="";}}}elseif(this.type=="×"){//乘法计算if(temp.length>1){varnum1=parseFloat(temp[0]);varnum2=parseFloat(temp[1]);if(str!="×"){this.inputcontent=num1*num2;this.type="";}}}elseif(this.type=="÷"){//除法计算if(temp.length>1){varnum1=parseFloat(temp[0]);varnum2=parseFloat(temp[1]);if(str!="÷"){this.inputcontent=num1/num2;this.type="";}}}}}对于目前的单次计算,现在已经做了很多判断,后续连续计算会有问题更改,但目前正常计算没有问题,期待后续更新。计算器界面的开发可以通过通用组件实现,具体实现方式可自行确定。NaN在开发过程中得到了验证。这种空洞的判断在很多方面都是无效的。是对Number的判断。了解更多开源知识,请访问:开源基础软件社区https://ost.51cto.com。