JSを使用して、参考用の簡単な計算機を完成させます。具体的な内容は次のとおりです。 要件: 入力値は数値のみで、正規表現を使用してください <!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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: ZabbixはLinuxシステムサービスのプロセスを監視
>>: Navicat を使用して MySQL データベースをエクスポートおよびインポートする方法
目次1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、デ...
目次1. はじめに2. インターフェース3. 簡単な例4. 結論1. はじめにMDN の公式 Web...
Q1: データベースにはどのようなインデックスがありますか?メリットとデメリットは何ですか? 1. ...
目次1. 基本的なイベント処理2. 親コンポーネントにカスタムイベントを送信するマウス修飾子4. キ...
質問docker run コマンドを使用して、tomcat コンテナが正常に追加されました。ポートも...
mysqlはブール型を返します最初のケースでは、直接戻ります select id='22a...
目次背景例誤解 - コールスタックを表示するためにウォッチでブレークポイントを設定する正しいアプロー...
Docker を初めて使用する場合は、コンテナの管理を始めるために習得する必要がある基本的なコマン...
1. 前提条件何度かインストールしているので、エラーについてはこれ以上説明しません。ちょっとわかりに...
1. 単一行オーバーフロー1. 1 行がオーバーフローした場合、超過部分は表示されます...または、...
目次アニメーションプレビューその他のUIライブラリ始めるコンポーネントディレクトリ構造トーストおおよ...
元のテキスト: https://dev.mysql.com/doc/refman/8.0/en/gr...
以前の就職面接で面接官が尋ねた質問を覚えています。「インライン要素とは何ですか。ブロックレベル要素と...
[LeetCode] 177. 最も高い給与従業員テーブルからn番目に高い給与を取得する SQL ...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...