> 文档中心 > HarmonyOS - 实现简易的计算器

HarmonyOS - 实现简易的计算器

项目说明
工具版本:DevEco Studio 3.0 Beta3

SDK版本;3.1.5.5

前言

本计算器是仿造windows系统实现的,实现了基本的功能:四则运算,清除,退位,小数点,正负号功能。作为FA初学者,拿来练练手,重点是熟悉其中一些语法的使用,以及css属性

效果展示

API参考

属性 类型 描述
border-radius - 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 - 分别设置左上,右上,右下和左下四个角的圆角半径。
background - 仅支持设置渐变样式,与background-color、background-image不兼容。
background-color - 设置背景颜色。

 

代码展示

1. html代码

计算器 {{iptValue}}
{{ item.value }} {{ item.value }}
{{ item.value }} {{ item.value }} {{ item.value }} {{ item.value }}

2. css代码

.container {    display: flex;    flex-direction: column;    justify-content: center;    align-items: center;    left: 0px;    top: 0px;    width: 454px;}.title {    font-size: 30px;    text-align: center;    width: 200px;    height: 100px;}.inputBox{    height: 80px;    background-color: bisque;    margin:10px;}.numBox{    display: flex;    margin: 10px;}.garyBox{    width: 60%;    display: flex;    flex-wrap: wrap;}.yellowBox{    width: 40%;    display: flex;    flex-wrap: wrap;}.bc-color{    width: 33%;    height: 80px;    margin: 5px;    border-radius: 10px;    text-align: center;    background-color: darkgray;}.bc-colora{    width: 50%;    height: 80px;    margin: 5px;    border-radius: 10px;    text-align: center;    background-color: orange;}

3. js代码

export 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();    }}

注意事项

  1. +*-/.五种符号不能开头输入,而且不能出现连续的符号 ,除此之外 ,不能连续输入两次及以上的符号。

  2. 一个0开头后面不能出现数字,出现NaN(例如0/0)后的逻辑处理或者是计算结果出现别的string字符需要立即自动消失。

  3. 运算表达式不能直接使用eval方法求值,在计算逻辑中只做两个数的单次运算,那么再FA中是否有可以直接返回复合运算结果的方法,有待继续学习发现。

  4. 运算表达式字符串转数组,以运算符号拆分,拿到两个数进行单次运算得到结果,这个拆分也可以用两个变量赋值运算。字符串的拆分截取中,replace()方法,原replace()方法中的第一个参数正则表达式在 FA中没生效,所以在这里替换使用slice()方法截取。

  5. if else 语句就是判断选择的是什么种类的运算符号,从而进行对应的运 算, 其中的parseInt的作用是解析一个字符串,并返回一个整数,文本框双向绑定赋结果。

总结

在写代码过程中发现,鸿蒙有些属性的写法不支持,类似常用的圆角属性不支持百分比,背景background不支持复合属性写法,以及字符串方法,数组方法中的参数,方法不合用等等,后续开发中还需慢慢总结积累。