JavaScript で簡単な計算機を実装する

JavaScript で簡単な計算機を実装する

この記事の例では、参考までに簡単な計算機を実装するためのJavaScriptの具体的なコードを共有しています。具体的な内容は次のとおりです。

シンプルな計算機を設計する

コード

 <本文>
  <a>最初の数字</a>
  <input type="test" id="inputId1" 値="" /><br/>
  <a>2番目の番号</a>
  <input type="test" id="inputId2" 値="" /><br/>
  <button onclick="cal('+')">+</button>
  <button onclick="cal('-')">-</button>
  <button onclick="cal('*')">*</button>
  <button onclick="cal('/')">/</button><br/>
  計算結果
  <input type="test" id="resultId" value="" />
  <script type="text/javascript">
   // 関数 add() {
   // コンソールログ('追加');
   // var inputObj1 = document.getElementById('inputId1');
   // var inputObj2 = document.getElementById('inputId2');
   // var 結果 = parseInt(inputObj1.value) + parseInt(inputObj2.value);
   // var resultObj = document.getElementById('result');
   // resultObj.value = 結果;
   // console.log(結果);
   // }
   関数cal(type) {
    var inputObj1 = document.getElementById('inputId1');
    var inputObj2 = document.getElementById('inputId2');
    スイッチ(タイプ){
     ケース '+':
      var 結果 = parseInt(inputObj1.value) + parseInt(inputObj2.value);
      壊す;
     場合 '-':
      var 結果 = parseInt(inputObj1.value) - parseInt(inputObj2.value);
      壊す;
     場合 '*':
      var 結果 = parseInt(inputObj1.value) * parseInt(inputObj2.value);
      壊す;
     場合 '/':
      var 結果 = parseInt(inputObj1.value) / parseInt(inputObj2.value);
      壊す;
    }
    var resultObj = document.getElementById('resultId');
    resultObj.value = 結果;
   }
   
  </スクリプト>
 </本文>
</html>

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

以下もご興味があるかもしれません:
  • HTML+JS に基づくシンプルな年齢計算ツールの実装
  • ネイティブ JavaScript を使用した Web 計算機の実装
  • JavaScriptで計算機機能を実現するプロセスの詳細な説明
  • JavaScriptはシンプルな計算機能を実装します
  • 計算機機能を実現するjsバージョン
  • シンプルな計算機を実装するためのネイティブ js
  • JavaScript を使用した Web 計算機の作成
  • JavaScript の例 - 計算機の実装

<<:  MySQL データベースの基本的な SQL ステートメントの概要

>>:  Docker で Python スクリプトを実行する方法

推薦する

MySQL メタデータで Hive テーブル作成ステートメントのコメント スクリプトを生成する方法

序文この記事は主にMySQLメタデータ生成Hiveテーブル作成ステートメントコメントスクリプトに関す...

MySQLの7種類のログの概要

MySQL には次のログ ファイルがあります。 1: 再実行ログ2: ロールバックログ(元に戻すログ...

MySQL の遅いクエリ操作の例の分析 [有効化、テスト、確認など]

この記事では、MySQL のスロー クエリ操作について例を挙げて説明します。ご参考までに、詳細は以下...

CSSリストのスライドにより、下部に隠れるのを防ぎ、長い画面モデルの処理に適応します。

1. モバイル端末がリストスライドを処理するとき、WeChat には下部にページに戻るボタンが組み...

Windows に Docker と docker-compose スイートをインストールするための詳細なチュートリアル

目次導入ダウンロードしてインストールする設定docker-composeをインストールする導入Doc...

MySQL の制限ページング最適化ソリューションの実装に関する簡単な説明

MySQL のページングステートメントの使用制限Oracle や MS SqlServer と比較す...

CSS ピックアップ矢印、カタログ、アイコン実装コード

1. CSS その他のアイコンアイコンを作成するには 3 つの方法があります。写真css (小さな矢...

Linux CentOS でスクリプトを定期的に実行するように設定する方法

多くの場合、サーバーでスクリプトを定期的に実行して操作をトリガーする必要があります。たとえば、Qin...

vue-nuxt ログイン認証の実装

目次導入リンク始めるコードを読み進めてくださいプロキシ設定傍受を要求する異なるプレフィックスを持つイ...

40 CSS/JSスタイルと機能的な技術処理

1-ドロップダウン選択ボックスのスタイル設定 - ドロップダウン リストを変更します。 2- <...

IE をフリーズさせる HTML コード

任意のテキスト エディターを開き、次のコードをコピーして、たとえば SomeFilename.htm...

MYSQLについては、データ型と操作テーブルを知る必要があります

データ型と操作データテーブル1.1 MySQL 型: 整数 1.2 MySQL データ型: 浮動小数...

H5レイアウト実装手順における天井と底部の吸引を解決するための純粋なCSS

どのような製品について言及したいですか?最近、ユーザーがマーケティングの変化をよりよく観察できるよう...

Linux の特別な権限 SUID、SGID、SBIT の詳細な説明

序文Linux のファイルまたはディレクトリの権限については、通常の rwx 権限についてすべて知っ...

フォント名に従ってフォントを呼び出すと、ブラウザに必要なフォントが表示されます。

質問 1: ブラウザに必要なフォントを表示するように指示するにはどうすればよいでしょうか? フォント...