angular实现calculate计算器

1.E:\projectgood\ajnine\untitled4\src\app\count\count.component.ts

typescript 复制代码

import { Component } from '@angular/core';

@Component({
  selector: 'app-count',
  standalone: true,
  imports: [],
  templateUrl: './count.component.html',
  styleUrl: './count.component.css'
})
export class CountComponent {


  subText = '';
  mainText = '';
  operand1: number=0;
  operand2: number=0;
  operator = '';
  calculationString = '';
  answered = false;
  operatorSet = false;

  pressKey(key: string) {
    if (key === '/' || key === 'x' || key === '-' || key === '+') {
      const lastKey = this.mainText[this.mainText.length - 1];
      if (lastKey === '/' || lastKey === 'x' || lastKey === '-' || lastKey === '+')  {
        this.operatorSet = true;
      }
      if ((this.operatorSet) || (this.mainText === '')) {
        return;
      }
      this.operand1 = parseFloat(this.mainText);
      this.operator = key;
      this.operatorSet = true;
    }
    if (this.mainText.length === 10) {
      return;
    }
    this.mainText += key;
  }

  allClear() {
    this.mainText = '';
    this.subText = '';
    this.operatorSet = false;
  }

  getAnswer() {
    this.calculationString = this.mainText;
    this.operand2 = parseFloat(this.mainText.split(this.operator)[1]);
    if (this.operator === '/') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 / this.operand2).toString();
      this.subText = this.calculationString;
      if (this.mainText.length > 9) {
        this.mainText = this.mainText.substr(0, 9);
      }
    } else if (this.operator === 'x') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 * this.operand2).toString();
      this.subText = this.calculationString;
      if (this.mainText.length > 9) {
        this.mainText = 'ERROR';
        this.subText = 'Range Exceeded';
      }
    } else if (this.operator === '-') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 - this.operand2).toString();
      this.subText = this.calculationString;
    } else if (this.operator === '+') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 + this.operand2).toString();
      this.subText = this.calculationString;
      if (this.mainText.length > 9) {
        this.mainText = 'ERROR';
        this.subText = 'Range Exceeded';
      }
    } else {
      this.subText = 'ERROR: Invalid Operation';
    }
    this.answered = true;
  }

}

2.E:\projectgood\ajnine\untitled4\src\app\count\count.component.html

xml 复制代码

<div class="container">
  <div class="row">
    <div class="col-md-4"></div>
    <div class="col-md-4">
      <div class="base">
        <div class="maindisplay">
          <div class="subdisplay">{{ subText }}</div>
          {{ mainText }}
        </div>
        <div class="keypad">
          <table style="width: 100%;">
            <tr>
              <td class="keys ackey" colspan="3" (click)="allClear()">AC</td>
              <td class="keys opkey" colspan="1" (click)="pressKey('/')">/</td>
            </tr>
            <tr>
              <td class="keys numkey" (click)="pressKey('7')">7</td>
              <td class="keys numkey" (click)="pressKey('8')">8</td>
              <td class="keys numkey" (click)="pressKey('9')">9</td>
              <td class="keys opkey" (click)="pressKey('x')">x</td>
            </tr>
            <tr>
              <td class="keys numkey" (click)="pressKey('4')">4</td>
              <td class="keys numkey" (click)="pressKey('5')">5</td>
              <td class="keys numkey" (click)="pressKey('6')">6</td>
              <td class="keys opkey" (click)="pressKey('-')">-</td>
            </tr>
            <tr>
              <td class="keys numkey" (click)="pressKey('3')">3</td>
              <td class="keys numkey" (click)="pressKey('2')">2</td>
              <td class="keys numkey" (click)="pressKey('1')">1</td>
              <td class="keys opkey" (click)="pressKey('+')">+</td>
            </tr>
            <tr>
              <td colspan="2" class="keys numkey" (click)="pressKey('0')">0</td>
              <td class="keys numkey" (click)="pressKey('.')">.</td>
              <td class="keys equalkey" (click)="getAnswer()">=</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <div class="col-md-4"></div>
  </div>
</div>

E:\projectgood\ajnine\untitled4\src\app\count\count.component.css

css 复制代码

.base {
  background: darkslategray;
  margin-top: 5vh;
  border: 3px solid black;
  width: 100%;
}

.maindisplay {
  background: lightgrey;
  height: 25vh;
  padding: 5% !important;
  font-size: 4rem;
  text-align: right;
  font-family: Courier, monospace;
  overflow: auto;
}

.subdisplay {
  border-bottom: 1px solid black;
  height: 25%;
  font-size: 2rem;
  overflow: auto;
}

.keypad {
  height: calc(200% / 3);
}

.keys {
  margin: 0;
  height: 20%;
  background: whitesmoke;
  color: black;
  padding: 5%;
  font-size: 2rem;
  text-align: center;
  cursor: pointer;
  opacity: 0.9;
}

.keys:hover {
  opacity: 1;
}

.ackey {
  color: red;
  background: black;
}

.equalkey {
  color: white;
  background-color: orangered;
}

.numkey {
  color: skyblue;
  background-color: black;
}

.opkey {
  color: white;
  background-color: black;
}

end