加算、減算、乗算、除算の機能を実現するには、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コンテナ

推薦する

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

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

Linuxパフォーマンス監視コマンドの簡単な紹介

システムでさまざまな IO ボトルネック、メモリ使用量の増加、CPU 使用率の増加などの問題が発生し...

Nginx プロキシ axios リクエストと注意事項

序文最近、小さなデモを作成しました。大規模な工場のオンライン データを使用したため、インターフェイス...

ウェブサイトのフロントエンドパフォーマンスの最適化: JavaScript と CSS

Yahoo チームが書いた、ウェブサイトのパフォーマンス最適化に関する記事を読みました。この記事は...

Docker5フル機能の港湾倉庫構築プロセス

Harbor は、Docker イメージを保存および配布するためのエンタープライズ レベルのレジスト...

JavaScript が Jingdong の虫眼鏡の特殊効果を模倣

この記事では、Jingdong虫眼鏡を模倣したJavaScriptの具体的なコードを参考までに共有し...

Linux システムで HugePages をすばやく構成するための完全な手順

序文Linux システムの HugePages と Oracle データベースの最適化については、関...

Ubuntu 18.04 Linux システムに JDK と Mysql をインストールする方法

プラットフォームの展開1. JDKをインストールするステップ1. OracleJDKをダウンロードす...

JavaScriptとTypeScriptの関係

目次1. JavaScript とは何ですか? 2. JavaScript は何に使用されますか? ...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

MySQLとPythonの相互作用の例

目次1. データを準備するデータテーブルを作成するデータの挿入2. SQLドリル1. SQL文の強化...

Vueが学生管理機能を実装

この記事では、学生管理を実装するためのVueの具体的なコードを例として紹介します。具体的な内容は次の...

MySQL 5.7 で my.ini ファイルが見つからない場合の解決策

my.ini とは何ですか? my.ini は、MySQL データベースで使用される設定ファイルです...

Dockerを使用してJenkinsをインストールする方法

目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...

JavaScript BOM の説明

目次1. BOMの紹介1. JavaScriptは3つの部分から構成される2.ウィンドウオブジェクト...