シンプルな加算計算機の JavaScript 実装

シンプルな加算計算機の JavaScript 実装

この記事では、参考までに、加算計算機を実装するためのJavaScriptの具体的なコードを紹介します。具体的な内容は次のとおりです。

具体的な要件:

1. ページレイアウト:
2. 計算ボタンをクリックした後、計算結果もページに表示される必要がある

具体的な実装:

<html>
  <ヘッド>
    <メタ文字セット="utf-8">
    <title>電卓</title>
    <スクリプト>
      関数myck(type){
        var num1 = document.getElementById("num1");
        var num2 = document.getElementById("num2");
        if(type==1){
          // 計算操作 var result = parseInt(num1.value) + parseInt(num2.value);
          アラート(結果);
          document.getElementById("resultDiv").innerText="最終計算結果:"+
            結果;
        }それ以外の場合(type==2){
          if(confirm("正しくクリアされましたか?")){
            // クリア num1.value = "";
            num2.値 = "";
            document.getElementById("resultDiv").innerText="";
          }
        }
      }
    </スクリプト>
  </head>

  <本文>
    <div style="margin-top: 100px;margin-left: 500px;">
      <span style="font-size: 60px;">足し算計算機</span>   
    </div>
    <div>
      <div class="innerDiv" style="margin-left: 550px;">
        番号 1: <input id="num1" type="number" placeholder="番号 1 を入力してください"> 
      </div>
    </div>
    <div>
      <div class="innerDiv" style="margin-left: 550px;">
      番号 2: <input id="num2" type="number" placeholder="番号 2 を入力してください">
     </div> 
    </div>
    <div>
      <div style="margin-left: 600px;" class="innerDiv">
        <input type="button" onclick="myck(1)" value="計算">
        <input type="button" onclick="myck(2)" value="クリア">
      </div> 
    </div>
    <div id="resultDiv">

    </div>
  </本文>
  <スタイル>
    .innerDiv{
      左マージン: 420px;
      上マージン: 20px;
    }
  </スタイル>
</html>

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

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

<<:  MySQLサービスの自動停止の解決策

>>:  一時ファイルを作成できないために MySQL が起動できない問題を解決する方法

推薦する

Vue3.0 手書き拡大鏡効果

達成される効果は、固定ズームが 2 倍になり、マウスが左側の画像領域に入るとマスク レイヤーが表示さ...

「さらに表示」ボタンによる複数行テキストの切り捨てに関する考察

最近、たまたまこの小さな要件に遭遇しました。昔、JS を使用してこれを処理したことを覚えていますが、...

配列をフィルタリングするJavaScript

この記事では、配列フィルタリングを実装するためのJavaScriptの具体的なコードを参考までに紹介...

WeChatミニプログラムでの仮想リストの実装例

目次序文分析する初期レンダリング方法初期最適化さらなる最適化方法2序文ほとんどのミニプログラムには、...

Mysql 自己結合クエリ例の詳細な説明

この記事では、Mysql の自己結合クエリについて説明します。ご参考までに、詳細は以下の通りです。自...

MySQLトランザクションとMySQLログの詳細な説明

取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...

Vue3 における provide と inject の使用法と原則

序文:親コンポーネントと子コンポーネント間でデータを渡す場合、通常は props と emittin...

MySQL はどのようにしてマスターとスレーブの一貫性を確保するのでしょうか?

目次MySQLマスタースレーブの基本原理3つのbinlog形式の比較混合形式のバイナリログが存在する...

Ubuntu Linux に Git と GitHub をインストールして使用する

Git 入門Git は、Linux(R) カーネル開発の管理を支援するために 2005 年に Lin...

CSS でハニカム/六角形アトラスを実装するためのサンプルコード

理由は分かりませんが、UIではハニカム効果(手を広げたような効果)のデザインが好まれます。 1. 六...

Ubuntu 20.04 Firefox でビデオを再生できない (Flash プラグインがない) 場合の解決策

1. Flashプラグインパッケージのダウンロードアドレス: https://get.adobe.c...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

JavaScript 開発における標準コミットメッセージの重要性の詳細な説明

目次標準コミットメッセージの重要性コミットするコミットリント依存関係をインストールする.commit...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

mysqladmin を使用して MySQL インスタンスの現在の TPS と QPS を取得する方法

mysqladmin は管理と操作を行う公式の mysql クライアント プログラムです。MySQL...