問題 × 解決策

javascriptで特定の時間の範囲内の場合、処理を行う

問題

javascriptで特定の時間の範囲内の場合、処理を行うには?

解決策

  • 「new Date()」で現在の日時の値を用意します。
  • 「new Date( '年(4桁)', '月(2桁)', '日(2桁)', '時(2桁)', '分(2桁)' )」で範囲の開始の時分と終了の時分のDate型の値を用意します。
  • 範囲の開始時分を現在の時分からマイナスして、「('現在の時分' - '範囲の開始時分') / 86400000」で差分を取得する。
  • 範囲の終了時分を現在の時分からマイナスして、「('現在の時分' - '範囲の終了時分') / 86400000」で差分を取得する。
  • 「if(0 <= '範囲の開始時分との差分' && '範囲の終了時分との差分' < 0)」で現在の時刻が開始時分以上で終了時分未満の場合、範囲内として処理を行う。

 

特定の時間の範囲内の判定

javascriptで特定の時間の範囲内の場合、処理を行う方法をご紹介します。

DEMOはこちら

0:00~5:59 0時から6時未満の時はこの行が点灯します。
6:00~11:59 6時から12時未満の時はこの行が点灯します。
12:00~17:59 12時から18時未満の時はこの行が点灯します。
18:00~23:59 18時から24時未満の時はこの行が点灯します。

HTML

HTMLはこちらになります。

<table class="type_schedule">
	<tbody>
		<tr start="0000" end="0559">
			<th scope="row">0:00~5:59</th>
			<td>0時から6時未満の時はこの行が点灯します。</td>
		</tr>
		<tr start="0600" end="1159">
			<th scope="row">6:00~11:59</th>
			<td>6時から12時未満の時はこの行が点灯します。</td>
		</tr>
		<tr start="1200" end="1759">
			<th scope="row">12:00~17:59</th>
			<td>12時から18時未満の時はこの行が点灯します。</td>
		</tr>
		<tr start="1800" end="2359">
			<th scope="row">18:00~23:59</th>
			<td>18時から24時未満の時はこの行が点灯します。</td>
		</tr>
	</tbody>
</table>

ポイント!

trタグに範囲の開始時分と終了時分を独自属性で設定します。

CSS

CSSはこちらになります。
範囲内であった場合用のCSSを設定します。

table.type_schedule tr.on th{
	font-weight: bold;
	background-color: #ffcec2;
}
table.type_schedule tr.on td{
	font-weight: bold;
	background-color: #fdf6f4;
}

現在の日時の取得

まず現在の日時を取得します。

var dt = new Date(); // 本日の日付のデータの格納
var y = String(dt.getFullYear()); // ↑から、年の値を抽出
var m = String(("00" + (dt.getMonth()+1)).slice(-2)); // ↑から、月の値を抽出
var d = String(("00" + dt.getDate()).slice(-2)); // ↑から、日の値を抽出
var now_date = String(y + m + d); // 年月日の数字列を連結

「each()」で、trタグをそれぞれ処理します。

「each()」で、trタグをそれぞれ処理します。

$('table.type_schedule tr').each(function() {
    // trタグをそれぞれ処理
});

ポイント!

以下の一通りの記述は、この「each()」の処理の中で行います

trタグの独自属性から値を取得します。

「trタグの独自属性(開始時分独自属性「start」終了時分独自属性「end」)から値を取得します。

if( $(this).attr('start') !== undefined ){
    var start = $(this).attr('start');
    var start_h = start.substr(0, 2); // 開始・時:最初の2桁を0埋めする
    var start_mi = start.substr(2, 2); // 開始・分:最後の2桁を0埋めする
}
if( $(this).attr('end') !== undefined ){
    var end = $(this).attr('end');
    var end_h = end.substr(0, 2); // 終了・時:最初の2桁を0埋めする
    var end_mi = end.substr(2, 2); // 終了・分:最後の2桁を0埋めする
}

開始時分・終了時分それぞれのDate型を生成し、差分を算出する。

開始時分・終了時分それぞれのDate型を生成し、差分を算出します。
先ほどの独自属性の値と現在の年月日の値を使ってDate型を生成し、現在の日時からマイナスして差分を出します。

開始時分の処理

/// 開始時分のDate型を生成
var start_time = new Date( now_date.substr(0, 4), now_date.substr(4, 2)-1, now_date.substr(6, 2), start_h, start_mi );
// 0以上ならば開始している
var start_judge = (dt - start_time) / 86400000;

終了時分の処理

// 終了時分のDate型を生成
var end_time = new Date( now_date.substr(0, 4), now_date.substr(4, 2)-1, now_date.substr(6, 2), end_h, end_mi );
// 0未満ならば終了していない
var end_judge = (dt - end_time) / 86400000;

それぞれの差分を比較し、範囲内である場合に処理を行う。

開始時分、終了時分それぞれの差分を比較し、範囲内である場合に処理を行います。
※今回はtrタグにクラス「on」を付与する処理を行っています。

if(0 <= start_judge && end_judge < 0){ // 開始していて終了していないならば
	$(this).addClass('on'); // "on"クラスを付与
};

参照

【【JavaScript】日付処理 – Qiita】
https://qiita.com/kazu56/items/cca24cfdca4553269cab

【【JavaScript サンプル集】指定した時刻の時・分・秒・ミリ秒を表示する – JavaScript@Workshop】
http://javascript.style-mods.net/tips/javatips_2-04.htm

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

2 + fifteen =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧