HarmonyOS應用開發：鴻蒙Js實戰，計算器功能開發！

幾天沒有更新了，最近上班有點忙，沒有及時更新一些常用知識點鑒于之前整理的都是一些原理知識點，大部分描述比較多，突然想到做一個小項目，看還沒有鴻蒙js實現計算器的項目，就用半個小時考慮做了一個計算器。

?

由于時間有限，目前是基本的計算功能，后續會優化成連續計算和功能更全面。

每天學習一點點。

?

場景：

?通過動態設置按鈕組件button實現計算器的鍵盤，通過文本text顯示計算的表達書，可以計算+，-，*，/，可以一個一個移除，可以重置 等。

??

下面我們開始今天的文章，還是老規矩，通過如下幾點來說：

1，實現思路

2，代碼解析

3，實現效果

3，總結

一，實現思路

計算器的鍵盤，本來是想使用grid的 但是有一些默認屬性不好控制，等后續組件完善了在做優化，目前grid適合一些均衡布局，通過監聽計算符號添加判斷邏輯，計算結果也是通過添加的計算類型進行計算，目前支持一級計算，后面做連續計算。

?

二，代碼解析

?

子組件：

1，hml文件

實用了四個for循環實現了鍵盤效果，后面想了一下其實一個就能搞定，動態換行就行，時間有限后續優化(總感覺計算器挺簡單，其實做起來還需要點時間)

<div class="container">
    <text class="input-content">{{inputcontent}}</text>
    <div class="menu-content">
        <div class="caluater" for="{{ caluater }}" >
            <button class="content" onclick="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
        </div>
    </div>
    <div class="menu-content">
        <div class="caluater" for="{{ caluater1 }}">
            <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
        </div>
    </div>
    <div class="menu-content">
        <div class="caluater" for="{{ caluater2 }}">
            <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
        </div>
    </div>

    <div class="list2-content">
        <div class="list3-content">
            <div class="list2-content">
                <div class="caluater" for="{{ caluater3 }}">
                    <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
                </div>
            </div>
            <div class="list2-content">
                <div class="caluater" for="{{ caluater4 }}">
                    <button class="content2" on:click="calculatorClick({{ $item.id }})">{{ $item.id }}</button>
                </div>
            </div>
        </div>
        <button class="equals" onclick="calculatorResult">=</button>
    </div>
</div>

2，css文件

?

樣式比較簡單，主要控制鍵盤和表達式文本的顏色和大小

.container {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
}
.input-content{
    background-color: #00ffffff;
    text-align: right;
    font-size: 25px;
    padding: 10px;
    font-weight: bold;
}
.menu-content{
    width: 100%;
    background-color: brown;
    allow-scale: true;
}
.caluater {
    flex-direction: row;
    width: 100%;
    height: 70px;
    background-color: #00ffffff;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 10px;
}
.content{
    font-size: 30px;
    font-weight: bold;
    radius: 10px;
    width: 100%;
    height: 100%;
    text-color: #007EFF;
    background-color: #A8CCFB;
}
.content2{
    font-size: 30px;
    font-weight: bold;
    radius: 10px;
    width: 100%;
    height: 100%;
    text-color: #000000;
    background-color: #dddcdc;
}
.list2-content{
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: brown;
}
.list3-content{
    flex-direction: column;
    margin-bottom: 10px;
}
.equals{
    width: 30%;
    height: 150px;
    font-size: 30px;
    font-weight: bold;
    radius: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

3，js文件

js中主要實現邏輯，請看具體計算的判斷。

import prompt from '@system.prompt';
export default {
    data: {
        title: "",
        inputcontent: "",
        number1: "",
        number2: "",
        type: "",
        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+"";
        let str = this.inputcontent
            .substring(this.inputcontent.length-1, this.inputcontent.length);
       switch(result) {
        case "←":
            if(this.inputcontent.length > 0) {
                let str = this.inputcontent
                    .substring(0, this.inputcontent.length - 1);
                this.inputcontent = str;
            }
           break;
        case "C":
            this.inputcontent = "";
           break;
        case "+":
            this.calcula(str,result,"+");
           break;
       case "-":
           this.calcula(str,result,"-");
           break;
       case "×":
           this.calcula(str,result,"×");
           break;
       case "÷":
           this.calcula(str,result,"÷");
           break;
       case ".":
           if(this.inputcontent.length > 0 && str != ".") {
               this.inputcontent += result;
           }
           break;
        default:
            this.inputcontent += result;
           break;
        }
    },
    calcula(str,result,cla){
        if(this.inputcontent.length > 0 && str != "+" && str != "-" && str != "×" && str != "÷") {
            this.type = cla;
            this.inputcontent += result;
        } else {
            this.calculatorResult();
        }
    },
    calculatorResult(){// 計算結果
        var temp = this.inputcontent.split(this.type);
        console.log("this.inputcontent = "+this.inputcontent)
        let str = 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)
               var num1 = parseFloat(temp[0]);
               var num2 = parseFloat(temp[1]);
               console.log("num1 = "+num1)
               console.log("num2 = "+num2)
               console.log("str = "+str)
               if(str != "+") {
                   this.inputcontent = num1 + num2;
                   this.type = "";
               }
           }
        } else if(this.type == "-") {  // 減法計算
            if(temp.length > 1) {
                var num1 = parseFloat(temp[0]);
                var num2 = parseFloat(temp[1]);
                if(str != "-") {
                    this.inputcontent = num1 - num2;
                    this.type = "";
                }
            }
        } else if(this.type == "×") {  // 乘法計算
            if(temp.length > 1) {
                var num1 = parseFloat(temp[0]);
                var num2 = parseFloat(temp[1]);
                if(str != "×") {
                    this.inputcontent = num1 * num2;
                    this.type = "";
                }
            }
        } else if(this.type == "÷") {  // 除法計算
            if(temp.length > 1) {
                var num1 = parseFloat(temp[0]);
                var num2 = parseFloat(temp[1]);
                if(str != "÷") {
                    this.inputcontent = num1 / num2;
                    this.type = "";
                }
            }
        }
    }
}

?

為了目前的單一計算，現在做了不少的判斷，后續做連續計算的時候會有改動，但是目前正常計算沒有問題，期待后續更新。

?

三，實現效果

四，總結

開發計算器最主要的是連續計算，連續計算需要添加計算優先級邏輯，后續考慮通過遍歷來判斷里面的計算。

計算器界面開發通過常用組件就能實現，實現方式可以自己定。

在開發中驗證了NaN，這個空的判斷很多方式無效的，他是針對Number做的判斷。

功能簡單，不喜勿噴。

原創不易，有用就關注一下。要是幫到了你 就給個點贊吧，多謝支持。

覺得不錯的小伙伴，記得幫我 點個贊和關注喲，筆芯筆芯~**

?

有問題請留言或者私信。