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層負荷分散のいくつかのスケジューリングアルゴリズムの簡単な理解

推薦する

ウェブページレイアウトに関する9つのヒント

<br />関連記事: Web コンテンツ ページ作成に関する 9 つの実用的な提案 W...

vue ディレクティブ v-bind の使用と注意点

目次1. v-bind: 要素の属性にデータをバインドできる2. v-bind: は次のように省略で...

HTML面接の質問の要約

1. doctypeの役割、厳密モードと混合モードの違い、そしてその重要性1. 構文形式: <...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

VMware WorkStation 14 pro インストール Ubuntu 17.04 チュートリアル

この記事では、VMware Workstation14 ProにUBuntu17.04をインストール...

jsはショッピングカートの加算と減算、価格計算を実装します

この記事の例では、ショッピングカートの加算と減算、価格計算を実装するためのjsの具体的なコードを共有...

CSS3 を使用して色付きのプログレスバーアニメーションを実装する例

簡単なチュートリアルこれは CSS3 カラー プログレス バー アニメーション効果です。 CSS3 ...

Linux のインスタンスにパブリック IP アドレスを割り当てる方法

説明するこのインターフェースを呼び出すときは、次の点に注意する必要があります。パブリック IP アド...

カルーセルの制作方法を実現するjs

この記事では、カルーセル画像の表示を実現するためのjsの具体的なコードを参考までに共有します。具体的...

JavaScriptを使用してページ効果を作成する

11. JavaScriptを使用してページ効果を作成する11.1 DOMプログラミングDOM プロ...

CSSは親要素の下の最初の子要素を選択します(:first-child)

序文最近、プロジェクトで :first-child を使用したのですが、すぐに思いつきました。これは...

win10 で mysql8.0.23 をインストールし、「サービスが制御機能に応答しません」という問題を解決する方法

Windows10にmysqlをインストールする1. 公式サイトからMySQLをダウンロードするウェ...

GobangゲームのWebバージョンを実装するためのJavaScript

この記事では、GobangゲームのWebバージョンを実装するためのJavaScriptの具体的なコー...

CSS メニューボタンアニメーション

ドロップダウンメニューを書くには、ボタンをクリックします。メニューの入り口はアイコンボタンをクリック...