#夏日挑战赛# HarmonyOS - 实现简易的计算器原创精华

中软小助手

发布于 2022-7-7 09:32

浏览

5收藏

作者：张前霞

本文正在参加星光计划3.0–夏日挑战赛

前言

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

效果展示

#夏日挑战赛# HarmonyOS - 实现简易的计算器-鸿蒙开发者社区

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>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.

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;
}

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.

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.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.

注意事项

+*-/.五种符号不能开头输入，而且不能出现连续的符号，除此之外，不能连续输入两次及以上的符号。
一个0开头后面不能出现数字，出现NaN（例如0/0）后的逻辑处理或者是计算结果出现别的string字符需要立即自动消失。
运算表达式不能直接使用eval方法求值，在计算逻辑中只做两个数的单次运算，那么再FA中是否有可以直接返回复合运算结果的方法，有待继续学习发现。
运算表达式字符串转数组，以运算符号拆分，拿到两个数进行单次运算得到结果，这个拆分也可以用两个变量赋值运算。字符串的拆分截取中，replace（）方法，原replace()方法中的第一个参数正则表达式在 FA中没生效，所以在这里替换使用slice（）方法截取。
if else 语句就是判断选择的是什么种类的运算符号，从而进行对应的运算，其中的parseInt的作用是解析一个字符串，并返回一个整数，文本框双向绑定赋结果。