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

推薦する

Nginx タイムアウト設定の詳細な説明

最近、プロジェクトで nginx を使用し、バックエンドで Java を使用しました。バックエンドで...

xshell を使用して VMware で Linux に接続する方法 (2 つの方法)

【序文】最近、ITOO の試験システムのストレステストを行いたいので、自分のコンピュータに Lin...

Nginx proxy_redirect の使用方法の詳細な説明

今日、Apache の nginx リバース プロキシを実行していたときに、ちょっとした問題に遭遇し...

Mysql-connector-java ドライバのバージョン問題の概要

Mysql-connector-java ドライバのバージョンの問題私のデータベースのバージョンは ...

Docker Hubの動作原理と実装プロセスの分析

GitHub が提供するコード ホスティング サービスと同様に、Docker Hub はイメージ ホ...

CSS を使用して適応型の幅と高さを持つ 16:9 の長方形を実装する例

先ほど、適応幅と高さが1:1の正方形を作成する方法について説明しました。 https://www.j...

MySQLは外部SQLスクリプトファイルのコマンドを実行します

目次1. SQLコマンドを含むSQLスクリプトファイルを作成する2. SQLスクリプトファイルを実行...

0.1秒の価値!フロントエンドのウェブページの高速化の問題について簡単に説明します

私が現在の仕事の面接を受けたとき、リーダーが真剣にこう言っていたのを覚えています。「今の世の中はイン...

CentOS7でPHPスケジュールタスクを実行する方法

序文この記事は主に CentOS7 で PHP スケジュールタスクを実行することに関する関連コンテン...

Vue3 ベースのフルスクリーン ドラッグ アップロード コンポーネント

この記事は主に、みんなで共有できるVue3ベースのフルスクリーンドラッグアップロードコンポーネントを...

Linux における「!」の知られざる使用法のまとめ

序文実際、Linux では、控えめな「!」が驚くほど多くの用途で使用されています。この記事では、「!...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...

Reactはラジオコンポーネントのサンプルコードを実装します

この記事の目的は、最も明確な構造を使用していくつかのコンポーネントの基本機能を実装することです。皆さ...

商品クエリ機能を実現するJavaScript

この記事の例では、商品検索機能を実現するためのJavaScriptの具体的なコードを参考までに共有し...

仮想マシンでXshell5をLinuxに接続する方法と障害の解決方法

かなり前に仮想マシンをインストールしましたが、ようやく Linux をインストールしました。マシンの...