この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <title>電卓</title> <スタイル> .op { マージン: 50px 自動; 幅: 300ピクセル; 高さ: 300px; 境界線: 1px 実線オレンジ; 背景色: ライトスカイブルー; 境界線の半径: 50px; } 入力{ 幅: 210ピクセル; 高さ: 30px; 境界線の半径: 5px; } ボタン { 幅: 30ピクセル; 高さ: 30px; 境界線の半径: 10px; } </スタイル> </head> <本文> <div class="op"> <h2 align="center">計算機</h2> <フォーム名="計算機"> <テーブルの位置合わせ="center"> <tr> <td>数値1:</td> <td><入力タイプ="テキスト" 名前="num1"></td> </tr> <tr> <td>数値2:</td> <td><入力タイプ="テキスト" 名前="num2"></td> </tr> <tr> <td colspan="2">          <button type="button">+</button>        <button type="button">-</button>        <button type="button">*</button>        <ボタンタイプ="ボタン">/</ボタン> </td> </tr> <tr> <td>結果:</td> <td><input type="text" name="result" 無効></td> </tr> </テーブル> </フォーム> </div> <スクリプト> //タグ名の下にあるすべての要素オブジェクトを取得し、配列を返します。let buttonArr = document.getElementsByTagName("button"); for (let but of buttonArr) { but.addEventListener('click', 関数() { 演算子 = this.innerHTML; count(演算子); }); } 関数 count(演算子) { // num1 という名前のフォーム計算機の入力値を取得します。let num1 = parseFloat(document.calculator.num1.value); num2 = parseFloat(document.calculator.num2.value); とします。 結果を '' とします。 スイッチ(演算子){ ケース '+': 結果 = num1 + num2; 壊す; 場合 '-': 結果 = num1 - num2; 壊す; 場合 '*': 結果 = num1 * num2; 壊す; 場合 '/': (数値2 == 0)の場合{ alert("除数はゼロにできません"); 戻る; } 結果 = num1 / num2; 壊す; } // 結果を属性名 result を持つ入力ボックスに割り当てます。 document.calculator.result.value = result; } </スクリプト> </本文> </html> 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQL ストレージエンジン InnoDB の設定と使用方法の説明
>>: Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解
MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...
目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...
注: 親コンテナーに高さと :data='Array' および overfolw:h...
フロントエンドエンジニアとして、IE は私たちにとって馴染み深いものであるはずです。設計案を実装する...
この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...
Dockerfile は、イメージをビルドするために使用されるテキスト ファイルです。テキスト コン...
ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...
由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...
導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...
nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...
事前に言っておくNodejs はデータベースを非同期操作として読み取るため、データベースがデータを読...
背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...
テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...
目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...
docker-compose-monitor.yml バージョン: '2' ネットワ...