JavaScriptで電卓コードを実装する方法-フロントエンドQ&A-php.cn

JavaScriptで電卓コードを実装する方法

WBOY

リリース： 2023-05-26 19:47:36

オリジナル

3196 人が閲覧しました

Javascript は、フロントエンド開発で広く使用されているプログラミング言語で、電卓などの多くの実用的なアプリケーションが含まれています。 PC 上でもモバイル上でも、JS によって開発された多くの電卓が使用されています。以下に、電卓コードを実装するいくつかの方法を紹介します。

1. 基本構造

電卓コードを書き始める前に、まずその基本構造を理解する必要があります。通常、電卓は、数字、演算子、等号、クリアキーを含む 4 つの基本的なボタンで構成されます。これに基づいて、基本的な 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 クラスのボタンはそれぞれ数字、演算子、等号、クリアキーに対応します。

2. クリックイベントの処理

上記のHTML構造では各種ボタンのクラス名を定義しましたので、次に対応するクリックイベントの処理関数を記述します。ボタンがクリックされた場合は、次のことを処理する必要があります:

数値ボタンの場合は、対応する数字を入力フィールドに表示する必要があります。演算子ボタンの場合は、入力された数値が完了し、その演算子が保存されているかどうかを判断する必要があります。
クリアキーの場合は、入力フィールドと演算子リストをクリアする必要があり、入力フィールドの内容は 0 にリセットされます;
等号キーの場合は、現在の式を計算し、結果を入力フィールドに表示する必要があります。

Calculator

クラスを定義し、クラス内でさまざまな処理関数を定義します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>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(); });</pre><div class="contentsignin">ログイン後にコピー</div></div>このコードでは、Calculator を定義します。 <p> クラスはコンストラクターを使用して電卓の状態を初期化し、さまざまな処理関数を定義します。イベントを処理するプロセスでは、<code>querySelectorAll と addEventListener を使用して、各ボタンが対応するクリックイベントに応答できるようにします。 3. 結論

上記は、JavaScript で電卓コードを実装する基本的な方法です。このプロセスでは、まず基本的な HTML 構造を設計し、次に対応するクリックイベント処理関数を記述し、最後に

Calculator

クラスを初期化する必要があります。実際の開発では、実際のニーズに応じて対応するコードを変更して、より複雑な計算機能を実現できます。

以上がJavaScriptで電卓コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。