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

推薦する

@media レスポンシブ CSS を使用してさまざまな画面に適応する例

定義と使用@media クエリを使用すると、さまざまなメディア タイプに異なるスタイルを定義できます...

Dockerを使用してSonarQubeをインストールする詳細なチュートリアル

目次1. イメージをプルする1.1 関連するイメージをプルして実行する1.1.1 関連する画像を取得...

mysql 結合クエリ (左結合、右結合、内部結合)

1. MySQLの一般的な接続INNER JOIN (内部結合、または等価結合): 2 つのテーブ...

Nginx がサーバーの生存状態をパッシブにチェックする詳細な説明

導入定期的にヘルスチェックを送信して、アップストリーム グループ内の HTTP サーバーのヘルスを監...

マージントップ崩壊現象とその具体的解決策

マージントップの崩壊とはmargin-top の崩壊は、CSS ボックス モデルで発生する現象です。...

MySQL で珍しい文字を挿入できないときの対処方法 (文字列値が正しくない)

最近、ビジネス側から、一部のユーザー情報の挿入に失敗し、エラー メッセージが「不正な文字列値:&qu...

Linux ベースの MySQL マスター スレーブ構成の全プロセスを記録する

mysql マスタースレーブ構成1. 準備ホスト: 192.168.244.128スレーブ: 192...

Nginx セッション損失問題の解決策

nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...

マップタグパラメータの詳細な紹介と使用例

マップ タグはペアで表示する必要があります。 <map> ....</map>...

html mailto(メール)の実用化について

ご存知のとおり、mailto は Web デザインと制作において非常に実用的な HTML タグです。...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

IIS 7.5はURL書き換えモジュールを使用してWebページのリダイレクトを実現します。

Apache では構成ファイルで Web ページまたは Web サイトの書き換えを簡単に設定できる...

JDBC および MySQL 一時テーブルスペースの詳細な分析

背景一時テーブルスペースは、データベースのソート操作を管理し、一時テーブルや中間ソート結果などの一時...

バックアップ データをインポートするときに innodb_index_stats がエラーを報告する場合の主キー競合の解決方法

障害の説明percona5.6、mysqldump フルバックアップ、バックアップデータのインポート...

MySQL における int の最大値の詳細な説明

導入2日前に見た問題について詳細に書きます。バイトコンピューターがバイナリに基づいていることは誰もが...