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

推薦する

Vue のプラグインとコンポーネントの違いと使い方のまとめ

このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...

Vue で 3D タグ クラウドを実装するための詳細なコード

プレビュー: コード:ページセクション: <テンプレート> <div class=...

ZabbixはSNMPに基づいてLinuxホストを監視します

序文: Linux ホストは、エージェント プログラムをインストールする場合でも、SNMP を使用す...

NavicatがLinuxサーバー上のMySQLに接続できない問題を解決する

最初は悲しい気持ちになりました。スクリーンショットは以下の通りです。 少し苦労しましたが、解決策は次...

VueはPCで写真をアップロードする機能を実現

この記事の例では、PC上で写真アップロード機能を実現するためのVueの具体的なコードを参考までに共有...

Docker Compose で利用可能な環境変数の詳細な説明

Compose のいくつかの部分は、何らかの方法で環境変数を扱います。このチュートリアルは、必要な情...

複数の X 軸を使用して 7 日間の天気予報を実現するための Echarts サンプル コード

目次UIデザインEcharts の例の効果序文サンプルコード最終結果UIデザイン Echarts の...

MySQLにおけるSQLの実行順序についてのちょっとした質問

今日、仕事中に左結合に関するSQLの問題に遭遇しました。後で解決しましたが、この問題を通じてSQLの...

CentOS 7 で RPM を使用して mysql5.7.13 をインストールする

0. 環境この記事のオペレーティング システム: CentOS 7.2.1511 x86_64 My...

uniAppエディタWeChatスライド問題について

ユニアプリアプレットはWeChatでも同様のドロップダウン問題を抱えることになる解決策は、app.v...

CSS 境界線の長さ制御機能の実装

以前は、境界線の長さをコンテナーよりも小さくする必要があったときに、div ネストを使用していました...

vue backtop コンポーネントを実装するための完全なコード

効果: コード: <テンプレート> <div class="back-t...

Vueはタブ切り替えの虫眼鏡効果を実装します

この記事では、タブ切り替えの虫眼鏡効果を実現するためのVueの具体的なコードを例として紹介します。具...

Linux seqコマンドの使い方の詳しい説明

01. コマンドの概要seq コマンドは整数のシーケンスを生成するために使用されます。 02. コマ...

ウェブページ HTML 特殊記号 HTML 特殊文字比較表

特殊記号名前付きエンティティ10進数エンコード特殊記号名前付きエンティティ10進数エンコードアルファ...