JSを使用して簡単な計算機を実装する

JSを使用して簡単な計算機を実装する

JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。

要件: 入力値は数値のみで、正規表現を使用してください
onchange(): 値が変化したときにイベントを実行します
onblur(): マウスが外に出たときにイベントを実行します

<!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>
</head>
<本文>
    <div style="text-align: center;">
        <input type="text" id="1" onkeyup="this.value=this.value.replace(/[^\d]/g,'') " >
    <select name="select" id="select">
        <option value="null">選択してください</option>
        <オプション値="0">+</オプション>
        <オプション値="1">-</オプション>
        <オプション値="2">*</オプション>
        <オプション値="3">/</オプション>
    </選択>
    <input type="text" id="2" onkeyup="this.value=this.value.replace(/[^\d]/g,'') ">
    =
    <input type="text" id="3" onkeyup="this.value=this.value.replace(/[^\d]/g,'') "><br><br>
    </div>
    <div style="text-align: center;">
        <input type="button" id="button"value="計算">
    </div>
    <スクリプト>
        
    関数accAdd(arg1,arg2){ 
        変数 r1,r2,m; 
        試す{
            r1=arg1.toString().split(".")[1].length
        }キャッチ(e){
            r1=0
        } 
        試す{
            r2=arg2.toString().split(".")[1].length
        }キャッチ(e){
            r2=0
        } 
        m = Math.pow(10,Math.max(r1,r2)) 
        (arg1*m+arg2*m)/mを返す 
        } 
        Number.prototype.add = 関数 (引数) { 
        accAdd(arg,this) を返します。 
        }


    関数Subtr(arg1,arg2){
        変数 r1,r2,m,n;
 
        試す{
            r1=arg1.toString().split(".")[1].length
        }キャッチ(e){
            r1=0
        }
 
        試す{
            r2=arg2.toString().split(".")[1].length
        }キャッチ(e){
            r2=0
        }
        m = Math.pow(10, Math.max(r1,r2));
 
     // 最終更新者: deeka
     // 精度の長さを動的に制御します n=(r1>=r2)?r1:r2;
        ((arg1*m-arg2*m)/m).toFixed(n) を返します。
    }
    function accMul(arg1,arg2) //乗算{ 
        var m=0,s1=arg1.toString(),s2=arg2.toString(); 
        試す{
            m+=s1.split(".")[1].length
        }キャッチ(e){} 
        試す{
            m+=s2.split(".")[1].長さ
        }キャッチ(e){} 
        Number(s1.replace(".",""))*Number(s2.replace(".","")) / Math.pow(10,m) を返します。 
        } 
 
    // 呼び出しをより便利にするために、Number 型に mul メソッドを追加します。 
    Number.prototype.mul = 関数 (引数) { 
    accMul(arg, this) を返します。 
    } 

    関数accDiv(arg1,arg2){ 
    var t1=0,t2=0,r1,r2; 
    試す{
        t1=arg1.toString().split(".")[1].length
    }キャッチ(e){} 
    試す{
        t2=arg2.toString().split(".")[1].length
    }キャッチ(e){} 
     (数学){ 
        r1=数値(arg1.toString().replace(".,"")) 
        r2=数値(arg2.toString().replace(".,"")) 
        (r1/r2)*pow(10,t2-t1) を返します。 
        } 
    } 
        Number.prototype.div = 関数 (引数) { 
        accDiv(this, arg) を返します。 
    }


        document.getElementById('button').onclick=function(){
            var num1 = document.getElementById('1').value;
            var num2 = document.getElementById('2').value;
            var 数値3;
            var op = document.getElementById('select').value;
            スイッチ(op){
                ケース '0':
                    num3 = accAdd(num1,num2);
                    壊す;
                ケース '1':
                    num3 = 減算(num1,num2);
                    壊す;
                ケース '2':
                    num3 = accMul(num1、num2);
                    壊す;
                ケース '3':
                    num3 = accDiv(num1、num2);
                    壊す;
            }
            document.getElementById('3').value=num3;
        }
       
    </スクリプト>

</本文>
</html>

効果画像:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • 豊富なコンテンツと実用的なメソッドを備えた、JavaScript で書かれたシンプルな計算機です。おすすめ
  • 電卓操作を実現するシンプルなjsコード
  • jsはシンプルな計算機を実装します
  • HTML+JS は、シンプルな計算機コード (加算、減算、乗算、除算) を実装します。
  • JS で書かれたシンプルな計算機実装コード
  • jsはシンプルな計算機を実装します
  • javascript の簡単な計算機の実装手順の分解 (画像付き)
  • 計算機機能を実装するための純粋な JavaScript コード (3 つの方法)
  • jsウェブ計算機のシンプルな実装
  • ウェブ計算機 JS計算機

<<:  ZabbixはLinuxシステムサービスのプロセスを監視

>>:  Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法

推薦する

Vueはスクロールバースタイルを実装します

最初はブラウザのスクロールバーのスタイルを変更して効果を実現したいと思っていましたが、情報を調べてみ...

Vueプロジェクトでパラメータジャンプ機能を実装する

ページの説明:​ メインページ: 名前 —> shishengzuotanhuichaxun ...

jQuery はパーセンテージスコアリングの進捗バーを実装します

この記事では、パーセンテージスコアリングプログレスバーを実現するためのjQueryの具体的なコードを...

MySQL 8.0 のタイムゾーン問題を解決する手順

ソフトウェアバージョンウィンドウズ: ウィンドウズ10 MySQL: mysql-8.0.16-wi...

MySQL の列から行への変換のヒント (共有)

序文:多くのビジネス テーブルでは、歴史的またはパフォーマンス上の理由により、最初のパラダイムに違反...

MySQLの結合の基本原理についての簡単な説明

目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...

MySQL分離の使用手順を読む

現在のトランザクションはどの履歴バージョンを読み取ることができますか?読み取りビューは、トランザクシ...

MySQL データ型の最適化の原則

MySQL は多くのデータ型をサポートしており、高パフォーマンスを得るには適切なデータ型を選択するこ...

Linux システムをバックアップする docker コマンドの詳細な説明

tar バックアップ システム sudo tar cvpzf backup.tgz --exclud...

CSS の両端揃えを実現する div+css レイアウトの 4 つの方法の概要

2 端揃えを実現する div+css レイアウトは、Web ページの組版でよく使用されます。この記事...

Ubuntu 18.04 に opencv 3.2.0 をインストールするためのソリューション

opencv.zip をダウンロード依存関係を事前にインストールします。まずダウンロードソースを更新...

Linux ドメイン ネーム サービス DNS 設定方法

DNSとはDNS の正式名称は Domain Name System で、ドメイン名解決システムを意...

MySQL のデータ削除とデータ テーブル メソッドの例

MySQL でデータやテーブルを削除するのは非常に簡単ですが、削除するとすべてのデータが消えてしまう...

計算プロパティとリスナーの詳細

目次1. 計算されたプロパティ1.1 基本的な例1.2 計算プロパティキャッシュとメソッド1.3 計...

Vue 仮想 Dom から実際の Dom への変換

別のツリー構造があるJavascriptオブジェクトでは、このツリーが本物であると伝えるだけでよいD...