JavaScript で関數(shù)電卓を作成するのは楽しいもので、DOM 操作、イベント処理、條件付きロジック、文字列操作、算術(shù)演算、キーボード入力の統(tǒng)合、ユーザー インターフェイスの CSS スタイリングなど、多くの概念が使用されています。このブログ投稿では、コードを深く掘り下げ、各行を分解してそのプロパティと機(jī)能を理解します。このブログを終えるまでに、電卓の仕組みをしっかりと理解できるようになります。
始めましょう。
HTML構(gòu)造のセットアップ
HTML は単純なもので、標(biāo)準(zhǔn)的な定型文から始まります。以下は、index.html
のコード スニペットです。
タグは、計(jì)算機(jī)のロジックと機(jī)能が定義されている外部 JavaScript ファイル script.js にリンクします。この外部ファイルはユーザーの操作と計(jì)算を処理し、電卓が意図したとおりに操作を?qū)g行できるようにします。
ここでは、表示ボックスには入力と結(jié)果が表示され、ボタン ボックスにはすべての電卓ボタンが表示されます。
スタイル設(shè)定用の CSS の追加
それでは、電卓を視覚的に魅力的で使いやすいものにスタイル設(shè)定してみましょう。
CSS コードを分解してみましょう。
- ラッパーのスタイリング
最小高さ: 100vh;ラッパーが少なくともビューポートの高さ全體を占めるようにします。ディスプレイ: フレックス;柔軟なレイアウトが可能になり、子の配置が可能になります。 justify-content: center; align-items: center; はコンテンツを水平方向に中央揃えにします。コンテンツを垂直方向の中央に配置します。最後に、境界線: 2 ピクセルの黒一色。ラッパーの周囲に境界線を追加します。
- 電卓コンテナのスタイル:
ディスプレイ: フレックス;電卓コンテナを柔軟にし、子要素を行または列に配置できるようにします。 flex-direction: 列;子要素を垂直方向に配置します。ギャップ: 12px;各セクションまたは要素の間にスペースを追加します。最後に、幅: 500px;電卓の幅を 500px に設(shè)定します。
- ディスプレイボックスのスタイル
境界線: 1 ピクセルの黒一色。表示ボックスに枠線を追加します。パディング: 16px;ボックス內(nèi)にスペースを設(shè)けて読みやすくします。テキストの配置: 右;テキストが右揃えになるようにします。フォントサイズ: 24px;フォントサイズを大きくして視認(rèn)性を向上させます。一方、border-radius: 5px;ボックスの角を丸くします。
- ボタンコンテナとボタンのスタイル
ここでは、ボタン コンテナは .flex-container でスタイル設(shè)定されています。子要素の柔軟なレイアウトを作成します。 justify-content: space-between;プロパティはボタン間にスペースをあけて均等に配置しますが、gap: 8px;各ボタン間の適切な間隔を確保して、位置を適切に調(diào)整します。
各ボタンは flex: 1; でスタイル設(shè)定されており、行內(nèi)で均等なスペースを占めます。パディング: 16px;快適さのために各ボタンの內(nèi)側(cè)にスペースを追加し、フォントサイズ: 20px;テキストが読みやすいことを保証します。フォントの太さ: 太字。テキストを目立たせます。一方、border: 1px 真っ黒です。各ボタンの周囲に境界線を追加します。さらに、border-radius: 8px;ボタンの角をわずかに丸め、カーソル: ポインタ;ホバーするとカーソルがポインタに変わります。ボタンの背景色は、background-color: rgb(255, 255, 255); で白に設(shè)定されます。
「=」ボタンの場合、.equal クラスは flex: 2.5; を使用します。より多くのスペースを確保し、他のボタンの幅の 2.5 倍にします。ボタンの上にマウスを置くと、button:hover スタイルによって背景色が灰色に変更されます。背景色:rgb(127, 131, 131);そして文字の色を白にします。このトランジション効果は、transition: 背景色 0.3 秒イーズ、カラー 0.3 秒イーズ; によって滑らかになり、色間の 0.3 秒のフェードが可能になります。
上記の HTML と CSS を使用すると、計(jì)算機(jī)は次のようになります:
それでは、計(jì)算機(jī)に命を吹き込む、主要部分に移りましょう。
JavaScript コードのスニペット
理解を深めるためにコードを分解してみましょう。
- DOM 要素の選択
displayBox 変數(shù)は、表示ボックス (
- 表示と演算子の変數(shù)
displayValue 変數(shù)は、畫面に表示される現(xiàn)在の値を保持し、計(jì)算中の正確な更新を保証します。 lastOperator 変數(shù)は最後に使用された演算子を追跡し、連続した演算子入力などのエラーを防ぎます。さらに、console.log はデバッグ目的、特にレビューのために calculatorBtns ノード リストを記録するために利用されます。
- ボタンクリックイベントリスナー/各ボタンのループ
forEach メソッドは、calculatorBtns コレクション內(nèi)の各ボタンをループするために使用されます。各ボタンについて、innerText プロパティが buttonValue 変數(shù)に割り當(dāng)てられます。この変數(shù)には、「AC」、「C」、「9」、「 」など、ボタンに表示されるテキストが保持されます。
その後、onclick イベント リスナーが各ボタンに追加されます。ボタンをクリックすると、割り當(dāng)てられた機(jī)能が実行されます。この関數(shù) handleButtonAction(buttonValue) は、ボタンのテキスト (buttonValue) を引數(shù)として受け取ります。ボタンの値を渡すことにより、この関數(shù)により、電卓は表示のクリア、數(shù)値の入力、數(shù)學(xué)的演算の実行などの正しいアクションを?qū)g行できるようになります。
- キーボード入力のキー押下の処理
これにより、電卓をキーボードでも操作できるようになります。キーが押されると、対応するボタンのアクションがトリガーされます。たとえば、キーボードで「1」を押すと、値「1」で handleButtonAction() 関數(shù)がトリガーされます。
- 表示機(jī)能
display() 関數(shù)は、表示ボックス (displayBox) の內(nèi)容を現(xiàn)在の displayValue で更新します。 displayValue が空の場合、デフォルトでは「0.0」が表示されます。
- ボタンアクションハンドラー(メインロジック):
コードは、電卓の表示を更新し、計(jì)算を処理するためにいくつかの手順を?qū)g行します。まず、eval(displayValue) は、displayValue に格納されている數(shù)式を評価します。たとえば、ディスプレイに「3 5」と表示されている場合、eval は計(jì)算して結(jié)果を返します。この場合、結(jié)果は 8 になります。
次に、displayValue = String(result) は結(jié)果を文字列に変換し、displayValue を更新して結(jié)果を畫面に表示します。計(jì)算が完了すると、lastOperator = "" は lastOperator を空の文字列にリセットし、以前の演算子がすべてクリアされるようにします。最後に、display() 関數(shù)は表示を更新して計(jì)算結(jié)果を表示します。
- AC(オールクリア)およびC(クリア)ボタンロジック
「AC」ボタンがクリックされると、コードは buttonValue が「AC」と等しいかどうかをチェックします。 true の場合、displayValue を空の文字列にリセットし、実質(zhì)的に表示全體をクリアして電卓をリセットします。次に、display() 関數(shù)が呼び出され、空の値で表示が更新されます。
「C」ボタンの場合、buttonValue が「C」の場合、コードは、slice(0, -1) を使用して、displayValue から最後の文字を削除します。これにより、ユーザーは最後の入力または文字を削除できるようになり、display() 関數(shù)が再度呼び出されて、それに応じて表示が更新されます。
- 演算子の検証
この條件は、表示されている現(xiàn)在値に基づいてオペレーターを押すことができるかどうかを検証するために使用されます。
條件 ["%", "/", "*", " "].includes(buttonValue) は、クリックされたボタンが演算子 (%、/、*、) のいずれかであるかどうかを確認(rèn)します。ボタンが演算子の場合、次のチェック if (!displayValue || displayValue === "-") により、ディスプレイが空であるかマイナス記號 (-) のみが含まれている場合には演算子を押すことができないことが確認(rèn)されます。これにより、2 つの演算子が連続する、または演算子で始まるなどのエラーが防止されます。條件が true の場合、関數(shù)は単に戻り、演算子は表示に追加されません。
- 連続オペレーターを防止する
このコード ブロックは、連続した演算子が押されるシナリオを処理し、「 」や「 - 」などの無効な入力を防ぎます。
まず、if (["%", "/", "*", " ", "-"].includes(buttonValue)) は、クリックされたボタンが演算子かどうかを確認(rèn)します。次に、 const lastCharacter = displayValue.slice(-1) は、displayValue.
內(nèi)の現(xiàn)在の式の最後の文字を取得します。次に、lastOperator = buttonValue は、lastOperator 変數(shù)を更新して現(xiàn)在のオペレーターを保存します。 if (["%", "/", "*", " ", "-"].includes(lastCharacter)) によってチェックされるように、最後の文字も演算子である場合、コードは、displayValue.slice() を使用してその文字を削除します。 0、-1）。これにより、式の最後に演算子が 1 つだけ表示され、連続する演算子が追加されることがなくなります。
- 小數(shù)點(diǎn)の検証
このコード ブロックは、小數(shù)點(diǎn) (.) が數(shù)値內(nèi)に 1 回だけ出現(xiàn)できるようにし、「3..5」のような無効な入力を防ぎます。
まず、條件 if (buttonValue === ".") は、クリックされたボタンが小數(shù)點(diǎn)であるかどうかを確認(rèn)します。そうであれば、検証が続行されます。
次に、const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) は、displayValue 內(nèi)の最後の演算子の位置を見つけます。次に、 const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue は、最後の演算子の後の displayValue の部分を抽出します。これは、入力されている現(xiàn)在の數(shù)値を表します。演算子がない場合は、displayValue 全體が考慮されます。
最後に、if (currentNumberSet.includes(".")) は、抽出された數(shù)値部分に既に小數(shù)點(diǎn)が含まれているかどうかを確認(rèn)します。存在する場合、関數(shù)は早期に戻り、ユーザーは 2 番目の小數(shù)點(diǎn)を入力できなくなります。これにより、「3.5」のような數(shù)値は有効ですが、「3..5」のような入力は無効であることが保証されます。
- 新しい値で表示を更新します:
コードdisplayValue = displayValue buttonValue;押されたボタンの値 (數(shù)字や演算子など) を既存の displayValue 文字列に追加します。これにより、ユーザーが電卓を操作するときに現(xiàn)在の式または數(shù)値が構(gòu)築されます。
ボタンの値を追加した後、display() 関數(shù)が呼び出されて表示が更新され、更新された displayValue が確実に反映されます。これにより、ユーザーが入力した最新の値または式が確実に表示されます。
結(jié)論
この JavaScript コードは、値の表示、計(jì)算の実行、入力のクリア、電卓での式の検証のロジックを処理します。ボタンのクリックとキーボード入力の両方で動作します。主な機(jī)能には、「=」または「Enter」キーが押されたときの計(jì)算の実行、AC (全クリア) および C (最後の文字のクリア) ボタンの処理、連続する演算子や複數(shù)の小數(shù)點(diǎn)などの無効な操作の防止などが含まれます。さらに、各アクションの後に表示が更新されるため、ユーザーには最新の値または式が表示されます。これらの機(jī)能を組み合わせることで、機(jī)能的でインタラクティブな計(jì)算機(jī)の基盤が提供されます。
以下は私のデモ リンクですので、自由に完全なコードをチェックアウトしたり、リポジトリを複製したり、ライブ デモを操作したりしてください。コーディングを楽しんでください!
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]
以上がHTML、CSS、JavaScript を使用した基本的な電卓の作成の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。
ホットAIツール
Undress AI Tool
脫衣畫像を無料で
Undresser.AI Undress
リアルなヌード寫真を作成する AI 搭載アプリ
AI Clothes Remover
寫真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中國語版
中國語版、とても使いやすい
ゼンドスタジオ 13.0.1
強(qiáng)力な PHP 統(tǒng)合開発環(huán)境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
node.jsでHTTPリクエストを作成する方法は？
Jul 13, 2025 am 02:18 AM
node.jsでHTTPリクエストを開始するには、組み込みモジュール、axios、およびnode-fetchを使用する3つの一般的な方法があります。 1.依存関係のない內(nèi)蔵http/httpsモジュールを使用します。これは基本的なシナリオに適していますが、https.get（）を使用してデータを取得したり、.write（）を介してPOSTリクエストを送信するなど、データステッチとエラーモニタリングの手動処理が必要です。 2.Axiosは、約束に基づいたサードパーティライブラリです。簡潔な構(gòu)文と強(qiáng)力な機(jī)能を備えており、非同期/待ち聲、自動JSON変換、インターセプターなどをサポートします。非同期リクエスト操作を簡素化することをお?jiǎng)幛幛筏蓼埂?3.Node-Fetchは、約束と単純な構(gòu)文に基づいて、ブラウザフェッチに似たスタイルを提供します
JavaScriptデータ型：プリミティブ対參照
Jul 13, 2025 am 02:43 AM
JavaScriptデータ型は、プリミティブタイプと參照タイプに分割されます。プリミティブタイプには、文字列、數(shù)字、ブール、ヌル、未定義、シンボルが含まれます。値は不変であり、コピーは値を割り當(dāng)てるときにコピーされるため、互いに影響を與えません。オブジェクト、配列、関數(shù)などの參照タイプはメモリアドレスを保存し、同じオブジェクトを指す変數(shù)は互いに影響します。 TypeofとInstanceOFを使用してタイプを決定できますが、TypeOfNullの歴史的な問題に注意してください。これらの2種類の違いを理解することは、より安定した信頼性の高いコードを書くのに役立ちます。
React vs Angular vs Vue：どのJSフレームワークが最適ですか？
Jul 05, 2025 am 02:24 AM
どのJavaScriptフレームワークが最良の選択ですか？答えは、あなたのニーズに応じて最も適切なものを選択することです。 1.反応は柔軟で無料で、高いカスタマイズとチームアーキテクチャ機(jī)能を必要とする中規(guī)模および大規(guī)模プロジェクトに適しています。 2。Angularは、エンタープライズレベルのアプリケーションと長期的なメンテナンスに適した完全なソリューションを提供します。 3. Vueは使いやすく、中小規(guī)模のプロジェクトや迅速な発展に適しています。さらに、既存のテクノロジースタック、チームサイズ、プロジェクトのライフサイクル、およびSSRが必要かどうかは、フレームワークを選択する上で重要な要素でもあります。要するに、絶対に最良のフレームワークはありません。最良の選択は、あなたのニーズに合ったものです。
JavaScript Timeオブジェクト、誰かがEACTEXE、Google Chromeなどのより高速なWebサイトを構(gòu)築します。
Jul 08, 2025 pm 02:27 PM
こんにちは、JavaScript開発者！今週のJavaScriptニュースへようこそ！今週は、DenoとのOracleの商標(biāo)紛爭、新しいJavaScript Timeオブジェクトがブラウザ、Google Chromeアップデート、およびいくつかの強(qiáng)力な開発ツールによってサポートされています。始めましょう！ 「JavaScript」の商標(biāo)を登録しようとするDeno Oracleの試みとのOracleの商標(biāo)紛爭は、論爭を引き起こしました。 Node.jsとDenoの作成者であるRyan Dahlは、商標(biāo)をキャンセルするために請願書を提出しました。
ハンドリングの約束：javascriptのチェーン、エラー処理、および約束の組み合わせ
Jul 08, 2025 am 02:40 AM
約束は、JavaScriptで非同期操作を処理するためのコアメカニズムです。チェーンコール、エラー処理、コンビナーの理解は、アプリケーションをマスターするための鍵です。 1.チェーンコールは、.then（）を通じて新しい約束を返し、非同期プロセスの連結(jié)を?qū)g現(xiàn)します。それぞれ.then（）は以前の結(jié)果を受け取り、値または約束を返すことができます。 2。エラー処理は、.catch（）を使用して例外をキャッチしてサイレント障害を回避し、キャッチのデフォルト値を返すためにプロセスを継続する必要があります。 3。promise.all（）などの組み合わせ（すべての成功後にのみ成功しました）、promise.race（）（最初の完了が返されます）、promise.allsettled（）（すべての完了を待っています）
キャッシュAPIとは何ですか？また、サービスワーカーでどのように使用されますか？
Jul 08, 2025 am 02:43 AM
Cacheapiは、ブラウザからネットワークリクエストをキャッシュするツールです。これは、ウェブサイトのパフォーマンスとオフラインエクスペリエンスを改善するために、サービスワーカーと併用することがよくあります。 1.開発者は、スクリプト、スタイルシート、寫真などのリソースを手動で保存できるようにします。 2。要求に応じてキャッシュ応答と一致させることができます。 3.特定のキャッシュの削除またはキャッシュ全體のクリアをサポートします。 4.フェッチイベントを聞いているサービスワーカーを介して、キャッシュの優(yōu)先順位またはネットワークの優(yōu)先戦略を?qū)g裝できます。 5.オフラインサポート、繰り返しのアクセス速度の高速化、主要なリソースのプリロード、バックグラウンドアップデートコンテンツによく使用されます。 6.それを使用する場合、キャッシュバージョンの制御、ストレージ制限、およびHTTPキャッシングメカニズムとの違いに注意する必要があります。
JavaScriptでのデータ操作のためのArray.Prototypeメソッドを活用します
Jul 06, 2025 am 02:36 AM
.map（）、.filter（）、.reduce（）などのJavaScriptアレイ內(nèi)蔵メソッドは、データ処理を簡素化できます。 1）.map（）は、要素を1つに変換して新しい配列を生成するために使用されます。 2）.filter（）は、條件ごとに要素をフィルタリングするために使用されます。 3）.reduce（）は、データを単一の値として集約するために使用されます。使用すると誤用を避ける必要があり、その結(jié)果、副作用やパフォーマンスの問題が発生します。
JSラウンドアップ：JavaScriptイベントループに深く潛り込む
Jul 08, 2025 am 02:24 AM
JavaScriptのイベントループは、コールスタック、WebAPIS、およびタスクキューを調(diào)整することにより、非同期操作を管理します。 1.コールスタックは同期コードを?qū)g行し、非同期タスクに遭遇すると、処理のためにWebAPIに引き渡されます。 2。WebAPIがバックグラウンドでタスクを完了した後、コールバックを?qū)潖辘工毳濠`（マクロタスクまたはマイクロタスク）に入れます。 3.イベントループは、コールスタックが空であるかどうかをチェックします?？栅螆龊?、コールバックはキューから取り出され、実行のためにコールスタックに押し込まれます。 4.マイクロタスク（Promise.thenなど）は、マクロタスク（SettimeOutなど）より優(yōu)先されます。 5.イベントループを理解するには、メインスレッドのブロックを避け、コード実行順序を最適化するのに役立ちます。
