JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示する方法をご紹介します。
四捨五入はMath.round()、切り捨てはMath.floor()、切り上げはMath.ceil()関数を使います。
Contents
小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するCSS記述
※四捨五入・切り捨て・切り上げした出力先(div)のCSS記述です。必要に応じて変更して下さい。
<style> body { font-size: 14px; text-align: center; line-height: 2em; } h1{ text-align: center; font-size: 18px; line-height: 1.6em; padding: 15px 0 40px 0; } div{ font-size: 20px; font-weight: bold; padding: 5px 0; } </style>
小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するHTML記述
※数値「19.87654321」を小数点以下2桁で四捨五入・切り捨て・切り上げした結果をclass=”sisyagonyu2″、class=”kirisute2″、class=”kiriage2″要素に出力します。
<h1>JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示</h1> <div class="sisyagonyu1"> 19.87654321 </div> ↓小数点以下2桁で四捨五入 <div class="sisyagonyu2"></div> <br><br> <div class="kirisute1"> 19.87654321 </div> ↓小数点以下2桁で切り捨て <div class="kirisute2"></div> <br><br> <div class="kiriage1"> 19.87654321 </div> ↓小数点以下2桁で切り上げ <div class="kiriage2"></div>
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するJavaScriptの記述
※jquery-1.11.0.min.jsファイルを読み込みます。Math.round、Math.floor、Math.ceilを使って指定桁数以下で四捨五入・切り捨て・切り上げ処理を行って結果を返します。
<script type="text/javascript" src="jquery-1.11.0.min.js"></script> <script type="text/javascript"> $(function() { //↓小数点以下2桁で四捨五入 var s2 = sisyagonyu($('.sisyagonyu1').text(), 2); $('.sisyagonyu2').text(s2); //↓小数点以下2桁で切り捨て var ks2 = kirisute($('.kirisute1').text(), 2); $('.kirisute2').text(ks2); //↓小数点以下2桁で切り上げ var ka2 = kiriage($('.kiriage1').text(), 2); $('.kiriage2').text(ka2); //四捨五入 function sisyagonyu(param, ketasu) { return Math.round(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu); } //切り捨て function kirisute(param, ketasu) { return Math.floor(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu); } //切り上げ function kiriage(param, ketasu) { return Math.ceil(param * Math.pow(10, ketasu) ) / Math.pow(10, ketasu); } }); </script>
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するデモページ
JavaScriptで小数点以下を桁数指定して四捨五入・切り捨て・切り上げ表示するデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告