首頁  >  文章  >  web前端  >  javascript怎麼實作計算器程式碼

javascript怎麼實作計算器程式碼

WBOY
WBOY原創
2023-05-26 19:47:363190瀏覽

Javascript是一門廣泛應用於前端開發的程式語言,其中包含了許多實用的應用,其中就包含了計算器。無論是在PC端還是在行動端,都有許多JS開發的計算器在使用。以下就是介紹一些實作計算器程式碼的方法。

一、基本結構

在開始寫計算器程式碼之前,我們首先應該先了解它的基本結構。通常,一個計算器會由四個基本按鈕組成,包括數字、運算元、等號和清除鍵。基於此,我們可以設計一個基本的HTML結構:

<div class="calculator">
  <input class="screen" readonly>
  <div class="buttons">
    <button class="number">0</button>
    <button class="number">1</button>
    <button class="number">2</button>
    <button class="op">+</button>
    <button class="number">3</button>
    <button class="number">4</button>
    <button class="number">5</button>
    <button class="op">-</button>
    <button class="number">6</button>
    <button class="number">7</button>
    <button class="number">8</button>
    <button class="op">*</button>
    <button class="number">9</button>
    <button class="op">.</button>
    <button class="op">/</button>
    <button class="clear">C</button>
    <button class="equal">=</button>
  </div>
</div>

在這個基本結構中,我們定義了一個calculator類別作為容器。 screen類別的input標籤用來顯示計算結果,buttons類別的按鈕分別對應數字、運算子、等號、清除鍵。

二、處理點擊事件

在上述HTML結構中,我們已經定義了各類別按鈕的類別名,接下來我們需要寫出對應的點擊事件處理函數。如果一個按鈕被點擊,我們需要處理以下事情:

  1. 如果是數字按鈕,需要在輸入欄中顯示對應數字;
  2. 如果是運算元按鈕,需要判斷目前輸入的數字是否已經完整,並將其運算子保存下來;
  3. 如果是清除鍵,需要清空輸入欄和運算子列表,並將輸入欄內容重設為0;
  4. #如果是等號鍵,需要計算目前的表達式並將結果顯示在輸入欄上。

接著,我們定義一個Calculator類,將各種處理函數定義在類別中:

class Calculator {
  constructor() {
    this.result = 0;
    this.operator = null;
    this.input = '';
    this.screen = document.querySelector('.screen');
  }

  addNumber(number) {
    this.input += number;
    this.updateScreen();
  }

  updateScreen() {
    this.screen.value = this.input;
  }

  addOperator(operator) {
    if (this.input !== '') {
      this.operator = operator;
      this.result = parseFloat(this.input);
      this.input = '';
      this.updateScreen();
    }
  }

  calculate() {
    if (this.operator !== null && this.input !== '') {
      switch (this.operator) {
        case '+':
          this.result += parseFloat(this.input);
          break;
        case '-':
          this.result -= parseFloat(this.input);
          break;
        case '*':
          this.result *= parseFloat(this.input);
          break;
        case '/':
          this.result /= parseFloat(this.input);
          break;
      }
      this.operator = null;
      this.input = this.result.toString();
      this.updateScreen();
    }
  }

  clear() {
    this.result = 0;
    this.operator = null;
    this.input = '';
    this.updateScreen();
  }
}

const calculator = new Calculator();

document.querySelectorAll('.number').forEach(button => {
  button.addEventListener('click', () => {
    calculator.addNumber(button.innerText);
  });
});

document.querySelectorAll('.op').forEach(button => {
  button.addEventListener('click', () => {
    calculator.addOperator(button.innerText);
  });
});

document.querySelector('.equal').addEventListener('click', () => {
  calculator.calculate();
});

document.querySelector('.clear').addEventListener('click', () => {
  calculator.clear();
});

在這個程式碼中,我們定義了一個Calculator類,使用建構函數初始化了計算器的狀態,並定義了各種處理函數。在處理事件的過程中,我們使用了querySelectorAlladdEventListener#,讓每個按鈕都能回應對應的點擊事件。

三、結論

以上就是Javascript實作計算器程式碼的基本方法。在這個過程中,我們首先需要設計基本的HTML結構,然後寫出對應的點擊事件處理函數,最後初始化一個Calculator類別。在實際開發中,我們可以根據實際需求修改對應的程式碼,實現更複雜的計算器功能。

以上是javascript怎麼實作計算器程式碼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn