Bagaimana untuk melaksanakan kod kalkulator dalam javascript

Javascript ialah bahasa pengaturcaraan yang digunakan secara meluas dalam pembangunan bahagian hadapan, termasuk banyak aplikasi praktikal, termasuk kalkulator. Sama ada pada PC atau mudah alih, terdapat banyak kalkulator yang dibangunkan oleh JS sedang digunakan. Berikut adalah pengenalan kepada beberapa kaedah melaksanakan kod kalkulator.

1. Struktur asas

Sebelum mula menulis kod kalkulator, kita harus terlebih dahulu memahami struktur asasnya. Biasanya, kalkulator akan terdiri daripada empat butang asas, termasuk nombor, operator, tanda sama dan kekunci jelas. Berdasarkan ini, kami boleh mereka bentuk struktur HTML asas:

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

Dalam struktur asas ini, kami mentakrifkan kelas calculator sebagai bekas. Teg screen kelas input digunakan untuk memaparkan hasil pengiraan Butang kelas buttons masing-masing sepadan dengan nombor, operator, tanda sama dan kekunci kosong.

2. Memproses acara klik

Dalam struktur HTML di atas, kami telah menentukan nama kelas pelbagai butang Seterusnya, kami perlu menulis fungsi pemprosesan acara klik yang sepadan. Jika butang diklik, kita perlu mengendalikan perkara berikut:

1. Jika ia adalah butang angka, nombor yang sepadan perlu dipaparkan dalam medan input
2. Jika ia ialah butang operator, ia perlu menentukan semasa Sama ada nombor yang dimasukkan sudah lengkap dan operatornya disimpan
3. Jika ia adalah kunci yang jelas, medan input dan senarai operator perlu dikosongkan, dan input; kandungan medan ditetapkan semula kepada 0;
4. Jika ia adalah kekunci tanda sama, ungkapan semasa perlu dikira dan hasilnya dipaparkan dalam medan input.

Seterusnya, kami mentakrifkan kelas Calculator dan mentakrifkan pelbagai fungsi pemprosesan dalam kelas:

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();
});

Dalam kod ini, kami mentakrifkan kelas Calculator, Pembina digunakan untuk memulakan keadaan kalkulator dan mentakrifkan pelbagai fungsi pemprosesan. Dalam proses mengendalikan acara, kami menggunakan querySelectorAll dan addEventListener supaya setiap butang boleh bertindak balas kepada acara klik yang sepadan.

3. Kesimpulan

Di atas adalah kaedah asas untuk melaksanakan kod kalkulator dalam Javascript. Dalam proses ini, mula-mula kita perlu mereka bentuk struktur HTML asas, kemudian tulis fungsi pemprosesan acara klik yang sepadan, dan akhirnya memulakan kelas Calculator. Dalam pembangunan sebenar, kita boleh mengubah suai kod yang sepadan mengikut keperluan sebenar untuk mencapai fungsi kalkulator yang lebih kompleks.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan kod kalkulator dalam javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!