jsを使って簡単な計算機を作る

jsを使って簡単な計算機を作る

この記事では、jsで簡単な計算機を作成する具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

写真のような簡単な計算機を作るには、まずフォームを作成し、写真のような見た目にする必要があります。

<表の境界線="1" セル間隔="0" >
   <tr><th colspan="2">ショッピング計算機</th></tr>
   <tr>
    <td>最初の数字</td>
       <td><入力タイプ="テキスト" id="入力Id1" /></td>
   </tr>
   <tr>
    <td>2番目の数字</td>
       <td><入力タイプ="テキスト" id="入力Id2" /></td>
   </tr>
   <tr>
    <td><button type="button" onclick="cal('+')" >+</button></td>
    <td><button type="button" onclick="cal('-')" >-</button>
    <button type="button" onclick="cal('*')" >*</button>
    <button type="button" onclick="cal('/')" >/</button></td>
   </tr>
   <tr>
    <td>計算結果</td>
    <td><input type="text" id="resultId"/></td>
   </tr>
</テーブル>

Onclick は cal() メソッドを使用します。実際、最初は add、sub、mul、div メソッドを使用しました。後で、これら 4 つのメソッドは算術演算子を除いて同じであることがわかりました。そのため、1 つのメソッドを使用することにしました。ボタンをクリックすると、メソッドに渡される算術演算子が異なります。コードは次のとおりです。

<script type="text/javascript">
 関数cal(type){
  var num1 = document.getElementById('inputId1');
  var num2 = document.getElementById('inputId2');
  var 結果;
   スイッチ(タイプ){
    ケース '+':
    結果 = parseInt(num1.value) + parseInt(num2.value);
    壊す;
    場合 '-':
    結果 = parseInt(num1.value) - parseInt(num2.value);
    壊す;
    場合 '*':
    結果 = parseInt(num1.value) * parseInt(num2.value);
    壊す;
    場合 '/':
    結果 = parseInt(num1.value) / parseInt(num2.value);
    壊す;
  }
 var resultObj = document.getElementById('resultId');
 resultObj.value = 結果;
 }
</スクリプト>

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

以下もご興味があるかもしれません:
  • ネイティブ JavaScript を使用した Web 計算機の実装
  • JavaScriptで計算機機能を実現するプロセスの詳細な説明
  • JavaScriptはシンプルな計算機能を実装します
  • 計算機機能を実現するjsバージョン
  • シンプルな計算機を実装するためのネイティブ js
  • JavaScript で簡単な計算機を実装する
  • JavaScript を使用した Web 計算機の作成
  • JavaScript を使って簡単な計算機を書く

<<:  docker の実行に必要な権限の分析

>>:  LinuxにComposerをインストールする方法

推薦する

JavaScriptはXiaomi Mall公式サイトの完全なページ実装プロセスを模倣します

目次1. ホームページ制作1. ダウンロードアプリの制作2. ナビゲーションバーの制作3. カルーセ...

MySQL 8.0.11 のインストールと設定方法のグラフィック チュートリアル (win10)

この記事ではMySQL 8.0.11のインストールと設定方法を参考までに記録します。具体的な内容は以...

mysqlとnavicat間の接続を確立する際の1251エラーを解決する

コンピュータを再インストールし、最新バージョンのMySQLデータベースをインストールしました。その結...

Centos7 FFmpeg オーディオ/ビデオ ツールのインストールに関する簡単なドキュメント

ffmpeg は非常に強力なオーディオおよびビデオ処理ツールです。公式 Web サイトは http:...

JavaScript のショートカットのヒント

目次1. 配列を結合する2. 配列をマージする(最初に) 3. 配列の複製4. 構造化分解割り当て5...

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

この記事では、MySQL 8.0.20 winx64 のインストールと設定方法を次のように説明します...

Vueはダイアログのカプセル化を実装します

目次Vue2 ライティングVue3プラグインのバージョンの記述Vue3 動的コンポーネントの記述書き...

vite2.x は ant-design-vue@next コンポーネントのオンデマンド読み込みを実装します。

1. 使用バージョンバイト:2.0 ant-design-vue: 2.0.0-rc.8ヴュー:3...

Vue の el-table は自動天井効果を実現します (固定をサポート)

目次序文実装のアイデア効果:使用:メインソースコード:序文多くのケースを見た結果、単純な観点からは、...

ランダムロールコールテーブルを実装するためのネイティブJavaScript

この記事では、JavaScriptのランダムロールコールテーブルの具体的なコードを参考までに紹介しま...

フォーム要素属性の読み取り専用と無効の使用の比較

1) 適用範囲:読み取り専用:input[type="text"],input[...

Node.js における非同期プログラミングの知識ポイントの詳細な説明

導入JavaScript はデフォルトでシングルスレッドであるため、コードは並列実行するための新しい...

MySQL 5.6.36 Windows x64 バージョンのインストールチュートリアルの詳細

1. 対象環境Windows 7 64ビット2. 材料(1)VC++2010リリースパッケージ(64...

CSS3 のエラスティック レイアウトでの em の使用の概要: 1em は何ピクセルですか?

私は長い間 CSS を使用してきましたが、Web 要素の関連属性を設定するために常に「px」を使用し...

Dockerfile ビルド中に発生する「/bin/sh: pip: コマンドが見つかりません」という問題の解決方法

記述した Dockerfile の内容は次のとおりです。 Python:3.6.8 から pip i...