サイト制作に関するメモ書き

HOME > JavaScript > jQuery > JavaScriptでサーバーの時間を取得して、指定範囲の間だけ表示の切り替えをする

JavaScriptでサーバーの時間を取得して、指定範囲の間だけ表示の切り替えをする

ユーザーのローカルの時間ではなくサーバーの時間を取得して、その時間に応じて処理を行ってみます。

※2017/09/22
IEでAjaxのキャッシュが残ってしまうようなので、cache: false を追加しました。

サンプルコード

まずはサーバーの時間を取得してみます。

JavaScript

$(function() {
	$.ajax({
		type: 'GET',
		cache: false
	}).done(function(data, status, xhr) {
		try {
			// サーバーの時間を取得
			var date = new Date(xhr.getResponseHeader('Date'));
		} catch(e) {
			// 取得できなかった場合はローカルの時間を取得
			var date = new Date();
		}
		console.log(date);
	}).fail(function() {
		// 取得できなかった場合はローカルの時間を取得
		var date = new Date();
		console.log(date);
	});
});

consoleに現在のサーバーの時間を表示しました。
もし失敗している場合、ローカルの時間を表示するようにしています。
サーバーの時間を取得するデモページ

次にあらかじめ決めておいた日時の範囲内に、現在日時が入っている場合に処理を行うようにしてみます。

HTML

<div id="result"></div>

JavaScript

// YYYY-MM-DD-HH-MM-SS
var dateRangeArr = [
	{
		'start': '2017-09-01-00-00-00',
		'end': '2017-09-08-00-00-00'
	}, {
		'start': '2017-09-08-00-00',
		'end': '2017-08-15-00-00'
	}, {
		'start': '2017-09-15',
		'end': '2017-09-22'
	}, {
		'start': '2017-9-22',
		'end': '2017-9-29'
	}, {
		'start': '2017-9-29',
		'end': '2017-10-06'
	}
];
$(function() {
	$.ajax({
		type: 'GET',
		cache: false
	}).done(function(data, status, xhr) {
		try {
			// サーバーの時間を取得
			var date = new Date(xhr.getResponseHeader('Date'));
		} catch(e) {
			// 取得できなかった場合はローカルの時間を取得
			var date = new Date();
		}
		callback_func(date);
	}).fail(function() {
		// 取得できなかった場合はローカルの時間を取得
		var date = new Date();
		callback_func(date);
	});

	// サーバーの時間を取得した後に行う処理
	function callback_func(currentDate) {
		// 結果に出力する内容
		var insText = '';

		for (var i = 0; i < dateRangeArr.length; i++) {
			// 開始日時
			var st = format_date(dateRangeArr[i]['start']);
			var startDate = new Date(st[0], st[1], st[2], st[3], st[4], st[5]);
			// 終了日時
			var en = format_date(dateRangeArr[i]['end']);
			var endDate = new Date(en[0], en[1], en[2], en[3], en[4], en[5]);
			var result = current_time_range_contains(currentDate, startDate, endDate);
			if(result) {
				insText += (i + 1) + '番目の配列の範囲に入っています。<br>';
			}
		}
		$('#result').html(insText);
	}

	// 現在時刻が指定範囲内かどうかを調べる
	function current_time_range_contains(currentDate, startDate, endDate) {
		var currentTimestamp = currentDate.getTime();
		var startTimestamp = startDate.getTime();
		var endTimestamp = endDate.getTime();
		if(startTimestamp <= currentTimestamp && currentTimestamp <= endTimestamp) {
			return true;
		} else {
			return false;
		}
	}

	// ハイフン区切りの日付を整形
	function format_date(date) {
		var dateArr = date.split('-');
		// 2桁の数値で先頭が0の場合は除去する
		for (var i = 0; i < dateArr.length; i++) {
			dateArr[i] = Number(dateArr[i]);
		}
		// 月は-1しておく
		if(dateArr.length >= 2) {
			dateArr[1] = dateArr[1] - 1;
		}
		// 足りていない値の補足
		while(dateArr.length < 6) {
			// 日が足りていない場合は1、それ以外は0を追加する
			if(dateArr.length === 2) {
				dateArr[dateArr.length] = 1;
			} else {
				dateArr[dateArr.length] = 0;
			}
		}
		return dateArr;
	}
});

指定範囲内に入っている場合、テキストを表示するようにしました。
サーバーの時間が指定範囲内の場合に処理をするデモページ

先ほどのサンプルを少し変更して、今日が誕生日かどうかを調べるようにしてみます。

JavaScript

// 誕生日のデータ
var dateRangeArr = [
	{'name': '七咲 逢', 'birthday': '2-21'},
	~ 略 ~
	{'name': 'エイスリン・ウィッシュアート', 'birthday': '7-25'}
]
$(function() {
	$.ajax({
		type: 'GET',
		cache: false
	}).done(function(data, status, xhr) {
		try {
			// サーバーの時間を取得
			var date = new Date(xhr.getResponseHeader('Date'));
		} catch(e) {
			// 取得できなかった場合はローカルの時間を取得
			var date = new Date();
		}
		callback_func(date);
	}).fail(function() {
		// 取得できなかった場合はローカルの時間を取得
		var date = new Date();
		callback_func(date);
	});

	// サーバーの時間を取得した後に行う処理
	function callback_func(currentDate) {
		// 結果に出力する内容
		var insText = currentDate.getMonth() + '月' + currentDate.getDate() + '日の誕生日<br>';

		for (var i = 0; i < dateRangeArr.length; i++) {
			// 誕生日の範囲
			var bd = format_date(currentDate.getFullYear() + '-' + dateRangeArr[i]['birthday']);
			var birthdayStart = new Date(bd[0], bd[1], bd[2], bd[3], bd[4], bd[5]);
			var birthdayEnd = new Date(bd[0], bd[1], bd[2], bd[3], bd[4], bd[5]);
			birthdayEnd.setDate(birthdayEnd.getDate() + 1);

			// 今日が誕生日かどうかを調べる
			var result = current_time_range_contains(currentDate, birthdayStart, birthdayEnd);
			if(result) {
				insText += dateRangeArr[i]['name'] + ',';
			}
		}
		$('#result').html(insText);
	}

	// 現在時刻が指定範囲内かどうかを調べる
	function current_time_range_contains(currentDate, startDate, endDate) {
		var currentTimestamp = currentDate.getTime();
		var startTimestamp = startDate.getTime();
		var endTimestamp = endDate.getTime();
		if(startTimestamp <= currentTimestamp && currentTimestamp <= endTimestamp) {
			return true;
		} else {
			return false;
		}
	}

	// ハイフン区切りの日付を整形
	function format_date(date) {
		var dateArr = date.split('-');
		// 2桁の数値で先頭が0の場合は除去する
		for (var i = 0; i < dateArr.length; i++) {
			dateArr[i] = Number(dateArr[i]);
		}
		// 月は-1しておく
		if(dateArr.length >= 2) {
			dateArr[1] = dateArr[1] - 1;
		}
		// 足りていない値の補足
		while(dateArr.length < 6) {
			// 日が足りていない場合は1、それ以外は0を追加する
			if(dateArr.length === 2) {
				dateArr[dateArr.length] = 1;
			} else {
				dateArr[dateArr.length] = 0;
			}
		}
		return dateArr;
	}
});

今日が誕生日かどうかを判断するデモページ
 

【参考サイト】

 

コメントを残す

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

▲PAGE TOP