シンプルな加算計算機の 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 が起動できない問題を解決する方法

推薦する

Linuxサービスの監視と運用および保守

目次1. psutilパッケージをインストールする次に、オペレーティングシステム内のすべてのサービス...

Vue プロジェクトで Baidu Map API を使用する方法

目次1. Baidu Map Open Platformにアカウントを登録してログインする2. 必要...

プレフィックスケースを削除する Nginx リバース プロキシ構成のチュートリアル

nginx をリバース プロキシとして使用する場合、リクエストをそのまま次のサービスに転送するだけで...

CSS の優先順位に関する詳細な紹介

CSS の優先順位について話す前に、CSS とは何か、CSS が何に使用されるのかを理解する必要があ...

jQueryフレームワークは、要素の表示と非表示の3つのアニメーションメソッドを実装しています。

目次1. デフォルトで表示と非表示を切り替える2. スライドして表示と非表示を切り替える3. フェー...

MySQL での varchar 型の日付の比較、並べ替え、その他の操作の実装

MySQL を使用する場合、日付は通常、datetime や timestamp などの形式で保存さ...

MySQLの複合インデックス方式の詳細な説明

どの DBMS でも、インデックスは最適化にとって最も重要な要素です。データ量が少ない場合、適切なイ...

Docker ベースの Redis クラスターの構築方法

Redisイメージをダウンロードする docker pull yyyyttttwww/redis を...

Linux 環境での Oracle 導入チュートリアル

1. 環境と関連ソフトウェア仮想マシン: VMwore Workstation Linuxシステム:...

24 の実用的な JavaScript 開発のヒント

目次1.配列を初期化する2. 配列の合計、最大値、最小値3. エラー値をフィルタリングする4. 論理...

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

MySQL_8.0.2のオフラインインストール方法は参考までに。具体的な内容は以下のとおりです。次の...

WeChatアプレットが左右連携を実現

この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

CSS でフローティングにより親要素の高さが崩れる問題を解決するいくつかの方法

以前は、フロートはレイアウトによく使用されていましたが、フローティングレイアウトを使用すると親要素の...

vue3ソースコード解析の簡単な実装方法

目次序文🍹準備🍲vue3 の使い方🍖 実装要約する序文最近、私の最初の公式 vue3 + ts プロ...