
プログラミング
2023.01.24
ITコラム
2017.12.19
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 数字関連の記述方法についてのサンプルを紹介します。
このサンプルは、数値をカンマ区切りにするサンプルです。
数字を入力して 変換ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { //カンマ区切りに変換 document.getElementById("outNum").value = getNum(document.getElementById("inNum").value); } function getNum(num) { //3桁毎にカンマを挿入 while(num != (num = num.replace(/^(-?\d+)(\d{3})/, "$1,$2"))); return num; } //--> </script> <div style="background-color : #CCC;"> <input type="text" id="inNum" placeholder="数字を入力して下さい。"> <input type="button" value="変換" onClick="disp()"> <input type="text" id="outNum" placeholder="カンマ区切りで表示されます。"> </div>
3 桁毎にカンマを挿入する関数 getNum(num) を作成して、ボタンクリック時に呼び出される関数 disp() で使用しています。
正規表現については、正規表現をご参照下さい。
このサンプルは、小数点以下の桁数を指定された通りに表示するサンプルです。
数字を入力して 変換ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { var num1 = document.getElementById("inNum1").value; var num2 = document.getElementById("inNum2").value; document.getElementById("outNum").value = getNum(num1, num2); } //小数点以下の桁数を揃える function getNum(num1,num2) { //整数の場合、小数点を付ける if (num1.indexOf(".") < 0) num1 += "."; //整数部と小数部を分割 var s = num1.split("."); //指定桁数に足りない場合、0 で埋める s[1] = s[1] + makeNum("0",num2); //小数点以下の桁数を揃える return s[0] + "." + s[1].substr(0,num2); } //指定桁数まで指定文字で埋める function makeNum(c,num) { var t,n; t = ""; for (n=0;n<num;n++) { t += c; } return t; } //--> </script> <div style="background-color : #CCC;"> 小数<input type="text" id="inNum1" placeholder="小数を入力して下さい。"> 小数点以下の桁数<input type="text" id="inNum2" placeholder="桁数を入力して下さい。"> <input type="button" value="変換" onClick="disp()"> <input type="text" id="outNum" placeholder="指定された小数点以下の桁数で表示されます。"> </div>
小数点以下の桁数を揃える関数 getNum(num1,num2) を作成して、ボタンクリック時に呼び出される関数 disp() で使用しています。
また、指定桁数まで指定文字で埋める関数 makeNum(s,num) も作成して、getNum(num1,num2) 内で 0 埋めに使用しています。
このサンプルは、指定された桁数になるように 数字の左側からゼロ埋めをするサンプルです。
数字を入力して 変換ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp() { var num1 = document.getElementById("inNum1").value; var num2 = document.getElementById("inNum2").value; document.getElementById("outNum").value = getNum(num1, num2); } //ゼロ埋めをする function getNum(num1,num2) { var n,m,s; //数値のままではlengthが使えないため、数値を文字列化する if (isNaN(num1)) { s = num1; } else { s = num1.toString(); // } //足りない桁数分の0を加える m = num2 - s.length; for (n=0;n<m;n++) { s = "0" + s; } return s; } //--> </script> <div style="background-color : #CCC;"> 数字<input type="text" id="inNum1" placeholder="下で指定する桁数より小さい桁数の数字を入力して下さい。"> 桁数<input type="text" id="inNum2" placeholder="桁数を入力して下さい。"> <input type="button" value="変換" onClick="disp()"> <input type="text" id="outNum" placeholder="指定された桁数までゼロ埋めして表示されます。"> </div>
ゼロ埋めをする関数 getNum(num1,num2) を作成して、ボタンクリック時に呼び出される関数 disp() で使用しています。
プログラミング
2023.01.24
転職ノウハウ
2023.01.23
転職ノウハウ
2023.01.20
転職ノウハウ
2023.01.16
インタビュー
2023.01.13
インタビュー
2023.01.13
INTERNOUS,inc. All rights reserved.