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 スクリプトを実行する方法

推薦する

AngularパイプラインPIPEの紹介と使い方

序文PIPE、パイプラインと翻訳されます。 Angular パイプは、HTML コンポーネントで宣言...

Spring Boot 2.4 の新機能、ワンクリックビルド、Docker イメージプロセスの詳細説明

背景開発プロセス中に Docker コンテナ化をサポートするために、通常は Maven を使用してコ...

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒント

Linux で履歴レコードを表示し、タイムスタンプを追加するためのヒントbashに詳しい人なら、hi...

Win10 64 ビットで圧縮パッケージを使用して最新の MySQL 8.0.18 をインストールするチュートリアル (画像とテキスト付き)

WIN10 64ビットに最新のMySQL8.0.18をインストールダウンロード公式サイトから最新バ...

MySQLにログインする際のエラー「ERROR 1045 (28000)」を解決する方法

今日はサーバーにログインして、データベース内のいくつかのものを変更する準備をしました。しかし、パスワ...

Tomcat プロセスの CPU 使用率が高い場合のトラブルシューティング記録を記録する

この記事では主にTomcatプロセスを記録し、TCP接続が多すぎることによるCPU使用率の過剰のトラ...

スライド効果を実現するためのネイティブJavaScript

ページ、特にホームページを作成するときは、通常、Web サイト全体の他のメイン ページにリンクできる...

CSS エラスティック ボックス flex-grow、flex-shrink、flex-basis の詳細な説明

3 つの属性 flex-grow、flex-shrink、flex-basis の機能は次のとおりで...

MySQL の自己結合重複排除に関する注意事項

機能シナリオを簡単に説明しましょう。データ行フィールドは次のとおりです。名前開始日時タイプこの表では...

MySQL 外部キー制約の一般的な操作の例 [表示、追加、変更、削除]

この記事では、例を使用して、MySQL 外部キー制約の一般的な操作について説明します。ご参考までに、...

Ubuntu 20.04 に GitLab をインストールして設定する方法

導入GitLab CE または Community Edition は、主に Git リポジトリのホ...

Centos8 に nginx1.9.1 をインストールする詳細な手順

1.17.9 本当はもっと美味しいNginx のダウンロード アドレス: https://nginx...

Linux の高性能ネットワーク IO と Reactor モデルの分析

目次1. 基本概念の紹介2. ネットワークIOの読み取りと書き込みのプロセス3. 5つのLinuxネ...

JavaScript で charAt() を使用して、最も頻繁に出現する文字とその出現回数をカウントする方法を教えます。

前回は、JavaScript の charAt() メソッドの使い方を紹介しました。今日は、最も多く...

クリックして認証コードと認証を切り替えるJavaScript

この記事では、クリックして切り替える認証コードと認証を実装するためのJavaScriptの具体的なコ...