期間限定日までの残り日数と時間をWEBサイトに表示　javascriptで将来日時から現在日時を引き算・繰り返す方法

2021.08.24

WEBサイト（特にECサイト）でよく見かける、「あと何時間で今日中にお届けします。」「キャンペーン終了日まであと何日です。」といった、期限日までの残り日数・時間を表示するための方法を備忘録も兼ねて紹介いたします。

JavaScriptで時間の取得を行い、jQueryのtextメソッドで要素の数字を更新していきます。

hourglass

使用するもの

  • HTMLファイル（各種ファイルとjQueryを読み込んでおいてください。）
  • CSSファイル（ほぼ装飾なし、多少の見栄えのみ調整しています。）
  • JSファイル（多少記述量多めですが、処理していることはシンプルです。）

実装手順概要

①下記 ②～⑥までの処理をする関数を作成し、 関数を1回呼び出し

②現在の日時を取得し、年、月、日付、曜日、時間、分をそれぞれ変数に代入

③期限日時を設定し、 年、月、日付、曜日、時間、分 をそれぞれ変数に代入

④期限日時の経過ミリ秒から現在日時の経過ミリ秒を差し引く

⑤差し引いた経過ミリ秒を日・時間・分に分ける計算（算数）

⑥jQueryのtextメソッドでHTMLの日時を入れる要素（最初は空）を更新

⑦上記関数を 1分間隔で呼び出す関数を作成し、 関数を呼び出し

CODEPEN で実装と確認

「Run Pen」をクリックしてください。

See the Pen limited time by blue moon (@blue-moon) on CodePen.

HTMLファイル

<head>
  <!-- 省略 -->
  <link rel="stylesheet" href="style.css"> <!-- ご自身のパスに変更 -->
</head>
<body>

  <!-- 現在の日時 -->
  <div id=today class="container">
    <div class="today">現在の日時 : </div>
    <div class="year"></div>
    <div class="month"></div>
    <div class="date"></div>
    <div class="day"></div>
    <div class="hours"></div>
    <div class="minutes"></div>
  </div>
  
  <!-- 期限日時 -->
  <div id=limited class="container">
    <div class="today">期限日時 : </div>
    <div class="year"></div>
    <div class="month"></div>
    <div class="date"></div>
    <div class="day"></div>
    <div class="hours"></div>
    <div class="minutes"></div>
  </div>

  <!-- 残り日数・時間 -->
  <div id=count class="container">
    <p>残り : </p>
    <div class="today"></div>
    <div class="hours"></div>
    <div class="minutes"></div>
  </div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="main.js"></script> <!-- ご自身のパスに変更 -->
</body>

CSSファイル

body {
  margin: 20px;
}

p {
  margin: 0;
}

.container {
  padding: 0.3em 0;
  display: flex;
  flex-wrap: wrap;
}

.day {
  padding: 0 0.5em 0;
}

JSファイル

const time = () => {  // 時刻表示の関数作成
  
  const today = new Date();  // 現在日時を取得
  const year = today.getFullYear();  // 年を取得
  const month = today.getMonth() + 1;  // 月を取得（0～11）
  const date = today.getDate();  // 日付を取得
  const day = today.getDay();  // 曜日を取得（0～6）
  const wArray = [ "日", "月", "火", "水", "木", "金", "土" ] ; // 曜日の配列を作成
  const wDay = wArray[day];  // 日本語の曜日
  const hours = today.getHours();  // 時間を取得
  const minutes = today.getMinutes();  // 分を取得

  console.log(today);  // 取得した現在日時を確認（削除可）
  $('#today .year').text(year + '年');
  $('#today .month').text(month + '月');
  $('#today .date').text(date + '日');
  $('#today .day').text(wDay + '曜日');
  $('#today .hours').text(hours + '時');
  $('#today .minutes').text(minutes + '分');

  /* 期限日時の設定と表示の処理 */
  const limiteDay = new Date('2023/12/31 23:59:00');  // 期限日の日時を代入
  const limiteyear = limiteDay.getFullYear();
  const limitemonth = limiteDay.getMonth() + 1;  // 月を取得、0～1で返されるため +1
  const limitedate = limiteDay.getDate();
  const limiteday = limiteDay.getDay();
  const limiteWDay = wArray[limiteday];
  const limitehours = limiteDay.getHours();
  const limiteminutes = limiteDay.getMinutes();

  console.log(limiteDay);  // セットした日時を確認（削除可）
  $('#limited .year').text(limiteyear + '年');
  $('#limited .month').text(limitemonth + '月');
  $('#limited .date').text(limitedate + '日');
  $('#limited .day').text(limiteWDay + '曜日');
  $('#limited .hours').text(limitehours + '時');
  $('#limited .minutes').text(limiteminutes + '分');
  
  /* 期限日時までの残り日数と時間の計算と表示の処理 */
  const elToday = today.getTime();  // 基準日付時間（1970年1月1日）からの経過ミリ秒取得
  const ellimiteDay = limiteDay.getTime();  // 基準日付時間（1970年1月1日）からの経過ミリ秒取得
  const count = ellimiteDay - elToday;  // 残り経過ミリ秒の差を計算
  const countDate = (Math.trunc(count / 24 / 60 / 60 / 1000));  // 日数に変換
  const countHours = (Math.trunc(count / 60 / 60 / 1000 % 24));  // 日数に変換後、24時間で割った余り
  const countMinutes = (Math.trunc(count / 60 / 1000 % 60));  // 時間に変換した後、60分で割った余り

  console.log(count);  // 残り経過ミリ秒の差（削除可）
  if (!countDate < 1) {  // 残り1日未満の場合は非表示
    $('#count .today').text(countDate + '日と');
  }
  if (!(countDate < 1 && countHours < 1)) {  // 残り1日未満かつ1時間未満の場合は非表示
    $('#count .hours').text(countHours + '時間');
  }
  $('#count .minutes').text(countMinutes + '分');

};

time();  // 時刻表示の関数呼び出し

//最初に時刻表示した後は、1分後に表示を変更する
const countDown = () => {  // 1分後に時刻表示の関数を呼び出す関数作成
  time();
  setTimeout(countDown, 60000);  // 1分間隔
};

countDown();  // 1分間隔時刻表示の関数呼び出し

補足説明

①getTime()
基準日付時間（1970年1月1日）からの経過ミリ秒取得を取得しています。
現在日時及び期限日時それぞれ取得した経過ミリ秒の差を、日数・時間・分に分割し処理しています。

②Math.trunc()
JavaScriptの組み込みのオブジェクトで、小数点以下を切り捨てます。
よって、表示された分の数値のみを単純に引き算すると、切り捨てた分の誤差1分が生じます。

詳細は、MDN JavaScript Math をご参照下さい。

他の3 つのMathメソッド、 Math.floor()、Math.ceil()、Math.round()とは異なり、Math.trunc()の動作は非常にシンプルで分かりやすいです。引数が正の数または負の数であるかに関わらず、ただ小数点とそれ以降にある数字を切り捨てます。

MDN 開発者向けのウェブ技術 > JavaScript > avaScript リファレンス > 標準組込みオブジェクト > Math > Math.trunc()

③setTimeout()
設定した一定時間経過後に一度だけ処理を行います。今回は1分後に表示を変更すればよいので、60000ミリ秒＝1分に設定しています。

一方、setInterval () は 設定した 一定間隔毎に処理を永遠と繰り返します。
それならば、最初から1分間隔でsetInterval () で処理すればと思うところですが、そうするとページを開いた時点では時刻は表示されておらず、開いてから1分後にやっと時刻が表示されることになります。
例えば、1秒間隔でsetInterval () すれば1秒後には表示はされますが、その後もずっと1秒間隔で処理をすることになります。

よって、処理を最初の1回と、その後は1分毎に処理するように分けています。

【参考】他のMathメソッド

下記はほんのMathメソッドのほんの一部です。

  • Math.floor () : 引数以下の最大の整数を返す
  • Math.ceil () ：引数以上の最小の整数を返す
  • Math.round () ：引数を四捨五入した整数を返す

【参考】現在日までの日数計算方法

今回紹介したものは、将来の日時から現在の日時を引き算する方法でした。
逆に、現在の日付からユーザーが入力した過去の日付を引き算する方法も記事にしております。

ご興味があればご参考にしてください。

WEBサイトの入力日付を受取り、現在日までの日数を計算し表示　JavaScriptとjQuery Datepicker
jQuery DatepickerとJavaScriptで、ユーザーが入力した日付から現在日までの日数を計算し表示。 現在日から特定の過去の日を引き算。 生まれた日からの計算をしたり、ダイエット期間を計算したり等に使用可能だと思います。
b-moon.net
タイトルとURLをコピーしました