加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。

加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。

1. parseFloat() 関数

Web ページ上に簡単な計算機を作成し、テキスト ボックスに 2 つの数値を入力して、2 つの数値の加算、減算、乗算、除算を実行できるようにします。
parseFloat() 関数は文字列を解析し、浮動小数点数を返します。
この関数は、文字列の最初の文字が数字であるかどうかを指定します。そうであれば、文字列は数値の末尾に達するまで解析され、数値が数値として返されます。
文字列としてではなく。
構文: parseFloat(string);

2. JavaScript グローバルプロパティ

財産説明する
無限正の無限大を表す値。
非N値が数値であるかどうかを示します。
未定義未定義の値を示します。

3. 完全なコード

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <script type="text/javascript">
       関数cal(){
           var nums = document.getElementsByName("num");
           var sz = document.getElementsByName("js");
           var 結果 = document.getElementsByName("rs");
           var n1 = parseFloat(nums[0].value);
           var n2 = parseFloat(nums[1].value);
           /*parseFloat() 関数は文字列を解析し、浮動小数点数を返します。
           この関数は、文字列の最初の文字が数字であるかどうかを指定します。そうであれば、文字列は数値の末尾に達するまで解析され、数値が数値として返されます。
           文字列としてではなく。
        */
            スイッチ(sz[0].値){
            ケース「追加」: 
            結果[0].値 = n1 + n2;
            壊す;
            ケース「最小」: 
            結果[0].値 = n1 - n2;
            壊す;
            ケース "mul" : 
            結果[0].値 = n1 * n2;
            壊す;
            ケース "div" : 
            結果[0].値 = n1/n2; 
            壊す;
              }
          }
      </スクリプト>
</head>
<本文>
    <div align="center">
        <input type="text" name="num" value="" onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
        <select name="js" size="1">
            <option value="追加">+</option>
            <option value="min">-</option>
            <option value="mul">*</option>
            <option value="div">/</option>
        </選択>
   <input type="text" name="num" value=""onkeyup="value=value.replace(/^\D*(\d*(?:\.\d{0,2})?).*$/g, '$1')" />
  =
   <input type="text" name="rs" value=""/><br>
   <button id="btn"onclick="cal()">計算</button>
</div>
</本文>
</html>

エフェクト表示:

ここに画像の説明を挿入

2 つの数値を HTML に入力して加算、減算、乗算、除算する方法について説明したこの記事はこれで終わりです。より関連性の高い HTML 加算、減算、乗算、除算のコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<:  MySQLで行を列に変換する方法

>>:  負荷分散と動的および静的分離操作を実現するDocker NginxコンテナとTomcatコンテナ

推薦する

JSが5つ星の賞賛を獲得

この記事では、5つ星の評価を獲得するためのJSの具体的なコードを参考までに共有します。具体的な内容は...

ミニプログラムカスタムコンポーネントの非効率的なグローバルスタイルの解決策

目次長すぎて読めないコンポーネントスタイルの分離デモテスト優先度ページの分離構成参考文献ネイティブ ...

一般的なCSS3アニメーションの実装方法

1. 何ですかCSS アニメーションは、CSS を使用して拡張マークアップ言語 (XML) 要素をア...

Vue の NetEase Cloud Music Player インターフェースを模倣したシンプルな実装プロセス

仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...

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

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

jsはFileReaderを使用してローカルファイルまたはBLOBを読み取ります

目次FileReaderはローカルファイルまたはBLOBを読み取ります1. FileReaderの使...

jsイベント委譲の詳細な説明

1. 各関数はオブジェクトであり、メモリを占有します。メモリ内のオブジェクトが増えるほど、パフォーマ...

Nginx の負荷分散アルゴリズムとフェイルオーバー分析

概要Nginx ロード バランシングは、アップストリーム サーバー (実際のビジネス ロジックによっ...

MysqlチューニングExplainツールの詳細な説明と実践的な演習(推奨)

MySQL チューニング ツールの詳細な説明と実践的な演習の説明 ツールの紹介の説明 分析例の説明...

シンプルなページング効果を実現するjQuery+Ajax

この記事では、ページング効果を実現するためのjquery+Ajaxの具体的なコードを参考までに紹介し...

MySQLの重複排除操作を極限まで最適化する方法

目次1. インデックスと変数の賢い使用1. インデックスなしの比較テスト2. created_tim...

MySql ストレージ エンジンとインデックスに関する知識のまとめ

ストレージエンジンデータベース ストレージ エンジンとは何ですか?データベース エンジンは、データベ...

MySQLカーソルの詳細な紹介

目次1. カーソルとは何ですか? 2. カーソルの使い方1. カーソルを宣言する2.カーソルを開く3...

CSS 水平方向の中央揃えと最大幅の制限

CSS レイアウトとスタイルに関する質問: 水平方向の中央揃えと最大幅の制限のバランスをとる方法最近...

コマンドを使用してMySQLデータベース(de1)を作成する方法

1. MYSQLに接続するフォーマット: mysql -h ホストアドレス -u ユーザー名 -p ...