JavaScript ベースのシンプルな計算機の実装

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するための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">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button">+</button>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button">-</button>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <button type="button">*</button>
                    &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
                    <ボタンタイプ="ボタン">/</ボタン>
                </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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 豊富なコンテンツと実用的なメソッドを備えた、JavaScript で書かれたシンプルな計算機です。おすすめ
  • 電卓操作を実現するシンプルなjsコード
  • jsはシンプルな計算機を実装します
  • HTML+JS は、シンプルな計算機コード (加算、減算、乗算、除算) を実装します。
  • JS で書かれたシンプルな計算機実装コード
  • jsはシンプルな計算機を実装します
  • javascript の簡単な計算機の実装手順の分解 (画像付き)
  • 計算機機能を実装するための純粋な JavaScript コード (3 つの方法)
  • jsウェブ計算機のシンプルな実装
  • ウェブ計算機 JS計算機

<<:  MySQL ストレージエンジン InnoDB の設定と使用方法の説明

>>:  Nginx 7層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

推薦する

MySQLで偽または真を保存する方法

MySQL ブール値、偽または真を格納つまり、データベースに保存されるブール値は 0 と 1 であり...

Vue.js フロントエンド Web ページ ポップアップ非同期動作例の分析

目次1. 序文2. ポップアップコンポーネントを2つ見つける3. 自分で作る3.1. Promise...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...

条件付きコメント形式の書き方とサンプルコード

フロントエンドエンジニアとして、IE は私たちにとって馴染み深いものであるはずです。設計案を実装する...

Reactはラジオコンポーネントのサンプルコードを実装します

この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...

Dockerfile テキストファイルの使用例の分析

Dockerfile は、イメージをビルドするために使用されるテキスト ファイルです。テキスト コン...

CentOS 6.5 i386 インストール MySQL 5.7.18 詳細チュートリアル

ほとんどの人はMySQLをコンパイルしてシステムディレクトリに置きますが、私のやり方はコンパイルした...

CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...

Linux DockerでSpringbootプロジェクトを実行するための詳細な手順

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

Nginx 構成の場所の一致ルールの例の説明

nginx の設定命令のスコープは、main、server、location の 3 種類に分けられ...

あるテーブルからバッチデータをクエリし、それを別のテーブルに挿入する MySQL の完全な例

事前に言っておくNodejs はデータベースを非同期操作として読み取るため、データベースがデータを読...

ノードでシェルスクリプトを使用する方法

背景開発中、特定の状況でビジネス ロジックをバッチ処理するためのスクリプトが必要になる場合があります...

HTML で特定のテキストを非表示にするにはどうすればよいでしょうか?

テキスト非表示コード、HTML 内の特定のテキストを非表示にするコードをコピーコードは次のとおりです...

カスタム変数を使用した MySQL クエリの最適化

目次並べ替えクエリの最適化変更されたばかりのデータ行を繰り返し取得しないようにする遅延ロードされた結...

dockerを使用してGrafana+Prometheus構成をデプロイする

docker-compose-monitor.yml バージョン: '2' ネットワ...