ウェブ計算機を実装するためのjs

ウェブ計算機を実装するためのjs

HTML、CSS、JS を使用してシンプルな Web 計算機を作成する方法は?

コンピュータには次の機能があります。

  • コンピュータ全体のフレーム
  • 入力ボックス
  • 入力ボタン

コンピュータ全体のフレーム:

/*div スタイルを設定する*/
 #表示div{
   境界線: 実線 1px;
   境界線の半径: 5px;
   幅: 350ピクセル;
   高さ: 400px;
   テキスト配置: 中央;
   margin: auto;/*中央に設定*/
   上マージン: 50x;
   背景色: rgb(214, 219, 190);    
}

入力ボックス:

/*入力ボックスのスタイルを設定する*/
  入力[タイプ=テキスト]{
      上マージン: 20px;
      幅: 290ピクセル;
      高さ: 40px;
      フォントサイズ: 20px;

}

入力ボタン:

/*ボタンのスタイルを設定する*/
   入力[type=button]{
      幅: 60ピクセル;
      高さ: 60px;
      上マージン: 20px;
      左マージン: 5px;
      右マージン: 5px;
      フォントサイズ: 30px;
      フォントの太さ: 太字;
      フォントファミリー: "楷書";
}

js コードを使用して、対応するビジネス ロジック操作を実行します。

<!--js コードを宣言-->
        <スクリプト>
            関数テスト(btn){
                //ボタンオブジェクトを取得します。var number = btn.value;
                //対応するビジネスロジックスイッチ(番号)を実行します{
                    ケース "=":
                        document.getElementById("input").value を eval(document.getElementById("input").value);
                        壊す;
                    ケース「c」:
                        document.getElementById("入力").value="";
                        壊す;
                    デフォルト:
                        //ボタンの値を入力ボックスに割り当てます。 document.getElementById("input").value+=number;
                        壊す;
                }
                
            }
</スクリプト>

コンピュータの組版に HTML を使用する:

<本文>
    <div id="showdiv">
        <input type="text" id="input" readonly="読み取り専用"><br>
        <input type="button" value="1" onclick="テスト(これ)">
        <input type="button" value="2" onclick="test(this)">
        <input type="button" value="3" onclick="テスト(これ)">
        <input type="button" value="4" onclick="test(this)"><br>
        <input type="button" value="5" onclick="テスト(これ)">
        <input type="button" value="6" onclick="テスト(これ)">
        <input type="button" value="7" onclick="テスト(これ)">
        <input type="button" value="8" onclick="test(this)"><br>
        <input type="button" value="9" onclick="test(this)">
        <input type="button" value="+" onclick="テスト(これ)">
        <input type="button" value="-" onclick="test(this)">
        <input type="button" value="*" onclick="test(this)"><br>
        <input type="button" value="0" onclick="テスト(this)">
        <input type="button" value="/" onclick="test(this)">
        <input type="button" value="c" onclick="test(this)">
        <input type="button" value="=" onclick="test(this)">
      


    </div>
</本文>

全体のコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <スタイル>
        /*div スタイルを設定する*/
        #表示div{
            境界線: 実線 1px;
            境界線の半径: 5px;
            幅: 350ピクセル;
            高さ: 400px;
            テキスト配置: 中央;
            margin: auto;/*中央に設定*/
            上マージン: 50x;
            背景色: rgb(214, 219, 190);    
         }
        /*入力ボックスのスタイルを設定する*/
        入力[タイプ=テキスト]{
            上マージン: 20px;
            幅: 290ピクセル;
            高さ: 40px;
            フォントサイズ: 20px;

        }
        /*ボタンのスタイルを設定する*/
        入力[type=button]{
            幅: 60ピクセル;
            高さ: 60px;
            上マージン: 20px;
            左マージン: 5px;
            右マージン: 5px;
            フォントサイズ: 30px;
            フォントの太さ: 太字;
            フォントファミリー: "楷書";
        }
        </スタイル>
        <!--js コードを宣言-->
        <スクリプト>
            関数テスト(btn){
                //ボタンオブジェクトを取得します。var number = btn.value;
                //対応するビジネスロジックスイッチ(番号)を実行します{
                    ケース "=":
                        document.getElementById("input").value を eval(document.getElementById("input").value);
                        壊す;
                    ケース「c」:
                        document.getElementById("入力").value="";
                        壊す;
                    デフォルト:
                        //ボタンの値を入力ボックスに割り当てます。 document.getElementById("input").value+=number;
                        壊す;
                }
                
            }
        </スクリプト>
        
        
    <title>ドキュメント</title>
</head>
<本文>
    <div id="showdiv">
        <input type="text" id="input" readonly="読み取り専用"><br>
        <input type="button" value="1" onclick="テスト(これ)">
        <input type="button" value="2" onclick="test(this)">
        <input type="button" value="3" onclick="テスト(これ)">
        <input type="button" value="4" onclick="test(this)"><br>
        <input type="button" value="5" onclick="テスト(これ)">
        <input type="button" value="6" onclick="テスト(これ)">
        <input type="button" value="7" onclick="テスト(これ)">
        <input type="button" value="8" onclick="test(this)"><br>
        <input type="button" value="9" onclick="test(this)">
        <input type="button" value="+" onclick="テスト(これ)">
        <input type="button" value="-" onclick="test(this)">
        <input type="button" value="*" onclick="test(this)"><br>
        <input type="button" value="0" onclick="テスト(this)">
        <input type="button" value="/" onclick="test(this)">
        <input type="button" value="c" onclick="test(this)">
        <input type="button" value="=" onclick="test(this)">
      


    </div>
</本文>
</html>

結果:

フロントエンド Web コンピューターの作り方を学んだはずです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

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

<<:  VMWare 仮想マシン 15.X LAN ネットワーク構成チュートリアル図

>>:  MySQLにおける区切り文字の定義と機能の詳細な説明

ブログ    

推薦する

誤って削除されたデータを復元するための mysqlbinlog コマンドを使用した mysql の実装

実験環境: MYSQL 5.7.22バイナリログを有効にするログ形式 MIXED実験プロセス: 1....

Linux コマンドにおける Ctrl+z、Ctrl+c、Ctrl+d の違いと使い方

Linux で Ctrl+c、Ctrl+d、Ctrl+z はどういう意味ですか? Ctrl+c と ...

MySQL データベースの必須条件クエリ ステートメント

目次1. 基本的な文法2. 条件式によるフィルタリング3. 論理式によるフィルタリング4. あいまい...

MySQL 5.7.23 解凍バージョンのインストールチュートリアル(画像とテキスト付き)

毎回インストールチュートリアルを探すのは面倒なので、後で確認できるように手順をバックアップします。解...

Linuxコマンドをバックグラウンドで実行する方法

通常、ターミナルでコマンドを実行する場合、別のコマンドの入力を開始する前に、現在のコマンドが終了する...

Docker で MySQL サービスをデプロイする方法と、遭遇する落とし穴

最近、ポーターを学んでいます。こんなに強力なものがあったなんて、今まで知らなかった気がします。クラス...

Vue3 でマークダウン エディター コンポーネントを使用する方法

目次インストールコンポーネントのインポート基本的な使い方保存したマークダウンまたは HTML テキス...

MySQL 5.7.24 のインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.24のインストールと設定のチュートリアルを参考までに紹介します。具...

Linux での MongoDB のインストールに関するチュートリアル

MongoDB はクロスプラットフォームであり、Windows と Linux の両方にインストール...

Tencent Cloud で HTTPS を無料で導入する方法

最近、WeChatアプレットを書いていたとき、WeChatアプレットではすべてのリクエストインターフ...

MySQL 8.0 の統計が不正確である理由

序文Oracle であれ MySQL であれ、新バージョンで導入された新機能は、一方では製品の機能性...

CSSカスタムプロパティの予備的な理解

現在、CSS プリプロセッサは Web 開発の標準となっています。 プリプロセッサの主な利点の 1 ...

HTML ページの部分更新の実装コード

イベント応答の更新: 要求されたときのみ更新1. JS HTML DOM または jQuery を介...

ウェブ開発におけるクロスドメインの理由に対する複数のソリューション

目次クロスドメインの理由JSONP Nginxソリューションバックエンドソリューションクロスドメイン...