『牛角书』基于JS实现的鸿蒙简单的计算器功能 原创

前言

说起计算器，想来大家都并不陌生，在日常生活中大家都会用的到。本文是实现了一个简单的计算器界面。目前只有基本的计算机功能。在后续的学习中，努力完善更多功能。

概述

首先，在本次项目中我们所用到的软件为DevEco Studio，安装教程在这里就不再多说了。在项目中我们实现的内容为基本的计算机功能。

实现思路

hml部分用于前端的页面展示。css部分控制了键盘的样式以及文本的颜色、大小、背景颜色。js部分实现了计算器的实现逻辑。用户通过前端将数字以及运算符号输入，通过软件将结果输出到前端页面

创建项目

在下载好成功DevEco Studio软件后，将其打开，选择左侧的Creat Project，选择一个Empty Ablitity应用，点击next，将项目名称改成calculator，包名可以按照自己的喜好来改，选择合适的保存路径以及SDK版本，最后点击finish。

代码实现

hml

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

css

.container {
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    width: 95%;
}
.input-content{
    background-color: #00ffffff;
    text-align: lift;
    font-size: 20px;
    padding: 10px;
    font-weight: bold;
}
.menu-content{
    width: 95%;
    background-color: brown;
    allow-scale: true;
}
.caluater {
    flex-direction: row;
    width: 100%;
    height: 70px;
    background-color: #00fffffl;
    margin-left: 6px;
    margin-right: 6px;
    margin-top: 11px;
}

js

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

实现效果