前言
本计算器是仿造windows系统实现的，实现了基本的功能：四则运算，清除，退位，小数点，正负号功能。作为FA初学者，拿来练练手，重点是熟悉其中一些语法的使用，以及css属性。
效果展示
API参考
属性 | 类型 | 描述 | |
border-radius | <length> | - | 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 | <length> | - | 分别设置左上，右上，右下和左下四个角的圆角半径。 |
background | <linear-gradient> | - | 仅支持设置渐变样式，与background-color、background-image不兼容。 |
background-color | <color> | - | 设置背景颜色。 |
代码展示
1、html代码
<div class="container">
<text class="title">
计算器
</text>
<input class="inputBox" ref="inputnum">
{{iptValue}}
</input>
<div class="numBox">
<div class="garyBox">
<text for="{{(index, item) in arr}}" if = "item.tool === 'num' " @click="numFn(item.value)" class="bc-color">
{{ item.value }}
</text>
<text for="{{(index, item) in arr}}" if = "item.tool === 'dot' " @click="dot(item.value)" class="bc-color">
{{ item.value }}
</text>
</div>
<div class="yellowBox">
<text for="{{(index, item) in arr}}" if = "item.tool === 'com'" @click="comFn(item.value)" class="bc-colora">
{{ item.value }}
</text>
<text for="{{(index, item) in arr}}" if = "item.tool === 'clear'" @click="clearFn" class="bc-colora">
{{ item.value }}
</text>
<text for="{{(index, item) in arr}}" if = "item.tool === 'del'" @click="deleteFn()" class="bc-colora">
{{ item.value }}
</text>
<text for="{{(index, item) in arr}}" if = "item.tool === 'equal'" @click="equal" class="bc-colora">
{{ item.value }}
</text>
</div>
</div>
</div>
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();
}
}
注意事项
- +*-/.五种符号不能开头输入，而且不能出现连续的符号 ，除此之外 ，不能连续输入两次及以上的符号。
- 一个0开头后面不能出现数字，出现NaN（例如0/0）后的逻辑处理或者是计算结果出现别的string字符需要立即自动消失。
- 运算表达式不能直接使用eval方法求值，在计算逻辑中只做两个数的单次运算，那么再FA中是否有可以直接返回复合运算结果的方法，有待继续学习发现。
- 运算表达式字符串转数组，以运算符号拆分，拿到两个数进行单次运算得到结果，这个拆分也可以用两个变量赋值运算。字符串的拆分截取中，replace（）方法，原replace()方法中的第一个参数正则表达式在 FA中没生效，所以在这里替换使用slice（）方法截取。
- if else 语句就是判断选择的是什么种类的运算符号，从而进行对应的运 算， 其中的parseInt的作用是解析一个字符串，并返回一个整数，文本框双向绑定赋结果。
总结
在写代码过程中发现，鸿蒙有些属性的写法不支持，类似常用的圆角属性不支持百分比，背景background不支持复合属性写法，以及字符串方法，数组方法中的参数，方法不合用等等，后续开发中还需慢慢总结积累。
