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をインストールする方法

推薦する

Chromeの最小フォントサイズ制限12pxに対する最終的な解決策

ウェブサイトを作成するユーザーの多くが、このような問題に遭遇すると思います。Chrome のデフォル...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

CSSでよく使われるフォントスタイルを設定することで様々なフォントの変更が可能(例詳細説明)

CSS フォント プロパティは、テキストのフォント ファミリ、サイズ、太字、スタイル (斜体など)...

表示しているページのスナップショットを Baidu が保存できないように設定する方法

今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...

Webpack パッケージング CSS 背景画像パスの問題に対する完璧なソリューション

vue コンポーネントのスタイル タグ内には、背景画像を使用する次の CSS コードがあります。 背...

CSSの優先度を理解する2つの方法

方法1: 値を追加する公式の説明を見るには MDN にアクセスしてください。優先度はどのように計算さ...

JavaScript 日付ツールの概要

ユーティリティ = { /** * 死亡年ですか? * @return {Boolse} true...

Baidu 入力メソッドが API を公開、自由に移植して使用できると主張

百度入力方式の担当者は、百度入力方式のオープンAPIの最大の利点は操作が便利であることであり、プラッ...

Vueのコンポーネント値の転送から始まるオブザーバーモードの詳細な説明

目次オブザーバーパターンVue パス値最初のステップは、main.jsにバスを登録することです。 2...

配列をフラット化する 5 つの JavaScript の方法

目次1. 配列の平坦化の概念2. 実装1. 減らす2. toString と split 3. 結合...

CSS3 フレックスレイアウトを使用して要素を均等に分散するサンプルコード

この記事では主に、CSS3 フレックスレイアウトを使用して要素を均等に配置する方法を紹介します。自分...

初心者向けの MySQL のインストール方法 (効果が実証済み)

1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...

Linux スケジュールタスクの関連操作の概要

皆様の参考と操作を容易にするために、様々な主要ウェブサイトを検索し、関連するスケジュールされたタスク...

VMware vSphere 6.5 インストール チュートリアル (画像とテキスト)

vmware vSphere 6.5 は vSphere ソフトウェアのクラシック バージョンであ...

Linux インストール MySQL5.6.24 使用手順

Linux インストール MySQL ノート1. MySQL データベース サーバーをインストールす...