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

語言: CN / TW / HK

時間 2022-08-09 16:09:03 51CTO系統頻道

主題: 鴻蒙 JavaScript

想了解更多關於開源的內容，請訪問：

51CTO 開源基礎軟體社群

http://ost.51cto.com

幾天沒有更新了，最近上班有點忙，沒有及時更新一些常用知識點鑑於之前整理的都是一些原理知識點，大部分描述比較多，突然想到做一個小專案，看還沒有鴻蒙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做的判斷。

想了解更多關於開源的內容，請訪問：

51CTO 開源基礎軟體社群

http://ost.51cto.com 。

「其他文章」