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アナリティクスタグは流用しないで下さい。