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

推薦する

MySQL双方向バックアップの実装方法

MySQL 双方向バックアップはマスター-マスター バックアップとも呼ばれ、両方の MySQL サー...

HTML+CSS+JS でスタックカルーセル効果を実装するサンプルコード

効果:スライドショーが一方向に動く場合、各画像のサイズ、位置、透明度、レベルを変更する必要があります...

Linux でファイルをあいまい検索するのに適したコマンドは何ですか?

1. はじめにこの記事では、主に Linux システムでコマンドライン ツールを使用してファイルを...

CSS3アニメーションを使用した簡単な指クリックアニメーションの実装例

この記事では主に、CSS3 アニメーションで簡単な指クリックアニメーションを実装する例を紹介し、皆さ...

単一テーブルのMySQLバックアップとリストアに関する簡単な説明

A. MySQLバックアップツールxtrabackupのインストール1. Percona 公式 xt...

JavaScriptにおけるPromiseの使い方と注意点について(推奨)

1. 約束の説明Promise は、非同期操作の最終状態 (失敗または正常完了) とその結果の値を...

CSS3 で less のテキストの長い影を実装する

この記事では主に、CSS3 LESS で長いテキストの影を実装する方法を紹介し、皆さんと共有します。...

Centos7.4 システムに yum ソースから mysql 5.6 をインストールする

システム環境: centos7.4 1. データベースがインストールされているかどうかを確認します。...

MySQL の DOS ウィンドウの文字化け問題を解決する方法

文字化けしたコードの問題は次のとおりです。 この問題の原因は非常に単純です。コマンドラインのエンコー...

vue+element カスタムクエリコンポーネント

この記事では主に Vue プロジェクトを紹介します。要素の導入を前提として、コンポーネントを 2 回...

Vue cli開発に基づく外部コンポーネントVantのデフォルトスタイルの変更の詳細な説明

目次序文1. 少ない2. コンポーネントをインポートする3. 設定ファイルを変更するステップ1: l...

Linux で 1 つのファイルの内容を別のファイルの末尾にコピーする

問題の説明:たとえば、ファイル 11 の内容は次のとおりです。こんにちはファイル22の内容は次のとお...

DockerコンテナでのMySQLデータのインポート/エクスポートの詳細な説明

序文MySQL データのインポートとエクスポートは mysqldump コマンドで解決できることは誰...

MySQLのストレージエンジンについてお話しましょう

基礎リレーショナル データベースでは、各データ テーブルはファイルに相当し、異なるストレージ エンジ...

JS 配列の重複を排除する 9 つの高度な方法 (実証済みで効果的)

序文一般的な方法はここには記載されていませんが、等しいかどうかを判断するための二重ループや、比較のた...