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データプロキシの詳細な説明

目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...

JavaScript リフレクション学習のヒント

目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...

MySQL インデックスの一般的な問題の概要

Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...

Vue3 Vue イベント処理ガイド

目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...

DockerにTomcatコンテナを追加したときにホームページにアクセスできない問題の解決方法

質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...

MySQLがブール型を返すいくつかの状況について簡単に説明します。

mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...

Vue はデータの変更をどのように追跡しますか?

目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...

Docker チュートリアル: コンテナの使用 (簡単な例)

Docker を初めて使用する場合は、コンテナの管理を始めるために習得する必要がある基本的なコマン...

CentOS8 デプロイメント LNMP 環境で mysql8.0.29 をコンパイルしてインストールする方法の詳細なチュートリアル

1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...

1 行または複数行のテキストがオーバーフローしたときに省略記号を表示する CSS を実装する方法

1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...

vue3を使用してAppleシステムのサイドメッセージプロンプト効果を模倣する

目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...

MySQL監視グループレプリケーションについて簡単に説明します

元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...

HTMLのインライン要素とブロックレベル要素とは何か、またそれらの違いは何ですか

以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素と...

LeetCode の SQL 実装 (177. 給与が N 番目に高い)

[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...