HarmonyOS應用開發:鴻蒙JS實戰,計算器功能開發!

語言: CN / TW / HK

​想了解更多關於開源的內容,請訪問:​

​51CTO 開源基礎軟體社群​

​https://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 開源基礎軟體社群​

​https://ost.51cto.com​ ​。