https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/use-tofixed-method-to-specify-the-number-of-decimal-places-in-javascript/
https://idea-hack.com/courses/how-to-handle-boolean-values-numbers-and-characters-in-javascript/lessons/use-tofixed-method-to-specify-the-number-of-decimal-places-in-javascript/

JavaScriptで小数点以下の桁数を指定するtoFixedメソッドの使い方

JavaScriptで小数点以下の桁数を指定するには、toFixedメソッドを利用します。

構文

メソッド意味返り値
数値.toFixed([桁数(省略時は0)]))小数点以下を、指定桁数にする文字列
toFixed()

指定した桁より下の小数点は四捨五入されます。

サンプルコード

サンプルコードとして、このページを開いている時間を出力するサンプルコードを紹介します。

まず、このページを読み込んだ時間を取得して、そこからフレームごとにrequestAnimationFrame()で常に値を更新します。

requestAnimationFrame()は「常に特定の処理を繰り返すコア関数」とでも思っておいてください。

Output
小数点0桁
小数点1桁
小数点2桁
小数点3桁
Pug
.container.my-5
	div#timer
		div#second
	table.table
		tr
			th 小数点0桁
			td#test_result1
		tr
			th 小数点1桁
			td#test_result2
		tr
			th 小数点2桁
			td#test_result3
		tr
			th 小数点3桁
			td#test_result4
CSS
#test_result1 {
	width: 100px;
}
JavaScript
/* テキストエリア */
const elapsedTimeText1 = document.getElementById( 'test_result1' );
const elapsedTimeText2 = document.getElementById( 'test_result2' );
const elapsedTimeText3 = document.getElementById( 'test_result3' );
const elapsedTimeText4 = document.getElementById( 'test_result4' );
/*現在の時刻を取得する*/
const startTime = new Date().getTime();

timeUpdate();

/** 毎フレーム実行される関数 */
function timeUpdate() {
  // 現在時刻
  const currentTime = new Date().getTime();
	//経過時間を取得
	const elapsedTime = currentTime - startTime;
  // 秒の表示。小数点
  elapsedTimeText1.textContent = ( elapsedTime / 1000 ).toFixed( 0 );
	elapsedTimeText2.textContent = ( elapsedTime / 1000 ).toFixed( 1 );
	elapsedTimeText3.textContent = ( elapsedTime / 1000 ).toFixed( 2 );
	elapsedTimeText4.textContent = ( elapsedTime / 1000 ).toFixed( 3 );
  // 次のフレームで再度timeupdate()を実行する
  requestAnimationFrame( timeUpdate );
}
インストラクター
コメント

コメントを残す