この記事では、参考までに、簡単な計算機を実装するための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層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解
<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...
目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...
1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...
MySQL の replace と replace into はどちらも頻繁に使用される関数です。...
この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...
この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...
簡単なチュートリアルこれは CSS3 カラー プログレス バー アニメーション効果です。 CSS3 ...
説明するこのインターフェースを呼び出すときは、次の点に注意する必要があります。パブリック IP アド...
この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...
11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...
方法 1: <input id= "File1" type= "...
序文最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは...
Windows10にmysqlをインストールする1. 公式サイトからMySQLをダウンロードするウェ...
この記事では、GobangゲームのWebバージョンを実装するためのJavaScriptの具体的なコー...
ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...