JavaScript を使用してクロック パディング操作を実行する方法

JavaScript 時計を作成する場合、時、分、秒などの時間情報を表示する必要があることがよくあります。ただし、時、分、秒の値は通常 2 桁未満であるため、時計を正常に表示するにはパディング操作が必要です。この記事では、JavaScript を使用してクロック充填操作を実行する方法とテクニックを紹介します。

JavaScript クロックの基本

クロック充填操作について説明する前に、まず JavaScript を使用して基本的なクロックを作成する方法を理解する必要があります。以下は、単純な JavaScript クロック サンプル プログラムです。

function updateClock() {
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  document.getElementById("clock").innerHTML = hour + ":" + minute + ":" + second;
}
setInterval(updateClock, 1000);

上記のコードでは、まず updateClock 関数を作成し、new Date() 関数 Get を渡します。現在時刻を取得し、時、分、秒をそれぞれ抽出します。次に、document.getElementById() 関数を使用して HTML ページ内の時計要素を取得し、その内容を現在時刻に設定します。最後に、setInterval() 関数を使用して updateClock 関数を 1 秒ごとに呼び出し、クロックのリアルタイム更新を実現します。

クロック充填の方法とテクニック

上記のコードでは、現在時刻の時、分、または秒の値が 2 桁未満の場合、見苦しい外観になることがわかります。 . 表示効果。たとえば、分の数値が 9 の場合、時計には「10:09:35」ではなく「10:9:35」が表示されます。この問題を解決するには、クロック パディング操作を実行する必要があります。以下に 2 つの一般的な埋め込み方法とテクニックを示します。

1. 文字列埋め込みの使用

function zeroPadding(num, length) {
  return ('0' + num).slice(-length);
}

上記のコードでは、 という名前のファイルを定義します。zeroPadding の関数 は 2 つのパラメータを受け入れます。num は埋められる値を表し、length は埋め込み後の桁数を表します。関数内では、まず値を文字列に変換し、次に先頭に 0 を追加し、slice() 関数を使用して指定された桁数の文字列を取得します。たとえば、分を 2 桁にパディングする必要がある場合は、 zeroPadding(9, 2) を呼び出すと文字列 "09" が返され、秒を 3 桁にパディングする必要がある場合は、 を呼び出します。 zeroPadding(35, 3) は文字列「035」を返します。

2. 数値の書式設定を使用する

function formatNumber(num, length) {
  return num.toLocaleString(undefined, {minimumIntegerDigits: length});
}

上記のコードでは、formatNumber という名前の関数を定義します。この関数は 2 つのパラメーターを受け入れます: num は埋められる値を表し、length は埋め込み後の桁数を表します。関数内では、ECMAScript 6 で新しく追加された toLocaleString() 関数を使用して、値を指定された桁数の文字列にフォーマットします。 minimumIntegerDigits オプションは、整数の最小桁数を指定します。

以下は、上記のパディング メソッドとテクニックを使用して上記の JavaScript クロック プログラムを改善するサンプル コードです:

function updateClock() {
  var now = new Date();
  var hour = zeroPadding(now.getHours(), 2);
  var minute = zeroPadding(now.getMinutes(), 2);
  var second = zeroPadding(now.getSeconds(), 2);
  var timeStr = hour + ":" + minute + ":" + second;
  document.getElementById("clock").innerHTML = timeStr;
}
setInterval(updateClock, 1000);

上記のコードでは zeroPadding を使用していることに注意してください。 関数は充填操作を実行します。 formatNumber 関数を使用したい場合は、上記のコードの zeroPadding を含む行を次の行に置き換えるだけです:

var hour = formatNumber(now.getHours(), 2);
var minute = formatNumber(now.getMinutes(), 2);
var second = formatNumber(now.getSeconds(), 2);

summary

When JavaScript クロックを作成し、クロックを埋める操作は基本的なスキルです。この記事では、文字列パディングと数値書式設定という 2 つの一般的なパディング方法とテクニックを紹介します。どの方法を使用しても、クロック充填操作を簡単に実装できるため、JavaScript クロック プログラムがより美しく実用的になります。

以上がJavaScript を使用してクロック パディング操作を実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。