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

推薦する

モバイルデバイス用のメタタグ設定の完全なリスト

序文以前フロントエンドを勉強していたとき、メタタグに対する私の理解はこの一文だけでした。 <メ...

よく使われる3つのMySQLデータ型

MySQL のデータ フィールドのタイプを定義することは、データベースを最適化するために非常に重要で...

Vue elementUI フォームのネストされたテーブルと各行の検証の詳細な説明

目次エフェクト表示コードリンクキーコード表形式データコンポーネントのネスト検証方法リセット方法完全な...

HTML ページジャンプコード

次のコードを index.html などのデフォルトのホームページ ファイルとして保存し、ルート デ...

Linux で Bash コマンド プロンプトをカスタマイズする方法

序文ご存知のとおり、bash (Bourne-Gain Shell) は、ほとんどの Linux デ...

Cronジョブを使用してCpanelでPHPを定期的に実行する方法

cpanel 管理バックエンドを開き、「詳細」オプションの下に「Clock Guardian Job...

Linux で推奨される 9 つの優れたコード比較ツールの概要

コードを書くとき、2 つのファイル間の違い、または同じファイルの異なるバージョン間の違いを知る必要が...

MySQL/MariaDB で完全な Unicode をサポートする方法

目次utf8mb4 の紹介UTF8 バイト数超過エラーutf8mb4 サポートデフォルトの文字エンコ...

Linux インデックスノード inode の詳細な説明

1. inodeの紹介inode を理解するには、まずファイル ストレージから始める必要があります。...

Windows での MySQL のダウンロード、インストール、設定、使用に関するチュートリアル

MySQLの概要MySQL はリレーショナル データベース管理システムです。データベースは構造化され...

docker windows10共有ディレクトリのマウント失敗の解決策

原因docker スクリプトを実行すると、コンテナを作成できないというエラーが発生します。以下のよう...

JSはスネークゲームを実装する

目次1. 初期化構造2. 蛇の色のレンダリング3. ヘビの動き4. ヘビの死を判定する方法 ヘビの死...

Vue での親子コンポーネント通信と、sync を使用して親子コンポーネント データを同期する

目次序文子コンポーネントは親コンポーネントにデータを渡す1. 親コンポーネントから子コンポーネントに...

HTMLおよびJSPページがキャッシュされ、Webサーバーから再取得されるのを防ぎます。

ユーザーがログアウトした後、ブラウザの戻るボタンがクリックされると、Web アプリケーションは保護さ...