ホームページ > 記事 > ウェブフロントエンド > JavaScriptで電卓コードを実装する方法
JavaScriptで電卓コードを実装する方法
- WBOYオリジナル
- 2023-05-26 19:47:363162ブラウズ
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 にリセットされます;
- 等号キーの場合は、現在の式を計算し、結果を入力フィールドに表示する必要があります。
- 次に、
クラスを定義し、クラス内でさまざまな処理関数を定義します。 <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>このコードでは、
クラスはコンストラクターを使用して電卓の状態を初期化し、さまざまな処理関数を定義します。イベントを処理するプロセスでは、querySelectorAll と addEventListener を使用して、各ボタンが対応するクリック イベントに応答できるようにします。 3. 結論
上記は、JavaScript で電卓コードを実装する基本的な方法です。このプロセスでは、まず基本的な HTML 構造を設計し、次に対応するクリック イベント処理関数を記述し、最後に
Calculator クラスを初期化する必要があります。実際の開発では、実際のニーズに応じて対応するコードを変更して、より複雑な計算機能を実現できます。
以上がJavaScriptで電卓コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。