ウェブ計算機を実装するための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における区切り文字の定義と機能の詳細な説明

推薦する

Vue で Baidu Map を呼び出して経度と緯度を取得する

プロジェクトでは、現在地の緯度経度を取得したり、場所を検索して緯度経度情報を取得したりする必要があり...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

WeChatアプレットでSVGアイコンを使用する方法

SVG は、さまざまな利点があるため、近年広く使用されています。残念ながら、WeChat ミニプログ...

MySQL ベストプラクティス: パーティションテーブルの基本タイプ

MySQL パーティションテーブルの概要MySQL の人気が高まるにつれて、MySQL に保存される...

Web 開発チュートリアル クロスドメイン ソリューションの詳細な説明

序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...

Linuxサーバ侵入緊急対応記録(概要)

最近、お客様から支援の依頼を受けました。管理されている通信コンピュータ ルームから、サーバーの 1 ...

Linux 7.6 バイナリに MySQL 8.0.27 をインストールする詳細な手順

目次1. 環境整備1.1 オペレーティング システムのバージョン1.2 ディスク容量1.3 ファイア...

Dockerコンテナシェルスクリプトの実行ステータスを監視する方法

シナリオ会社のプロジェクトはDockerでデプロイされています。原因不明ですが、コンテナが時々停止し...

モバイル Web アプリ上の画像が鮮明ではなく、非常にぼやけているのはなぜですか?

なぜ?最も簡単に言えば、ピクセルは均等ではないということです。携帯電話に表示される写真はとても繊細に...

MySQL バッチ挿入ループの詳細なサンプルコード

背景数日前、MySql でページングを行っていたときに、ページングに制限 0,10 を使用するとデー...

Linux での Python スクリプトの自動起動とスケジュール起動の詳細な手順

1. Pythonは起動時に自動的に実行されますPython の自己起動スクリプトがauto.pyで...

Ajax の JavaScript ソリューションにおける parsererror エラー ケースの詳細な説明

ajax の parsererror エラー (バックグラウンドからフロントエンドに送信される js...

JS の難しさ 同期と非同期、スコープとクロージャ、プロトタイプとプロトタイプ チェーンの詳細な説明

目次JS スリーマウンテンズ同期 非同期同期と非同期の違い範囲、終了関数スコープチェーンブロックスコ...

Vueルータールーティングガードの詳細な説明

目次1. グローバル beforeEach 1. グローバル beforeEach 2. 実装2. ...