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構造では各種ボタンのクラス名を定義しましたので、次に対応するクリックイベントの処理関数を記述します。ボタンがクリックされた場合は、次のことを処理する必要があります:
クラスを定義し、クラス内でさまざまな処理関数を定義します。 <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 サイトの他の関連記事を参照してください。