ユーザーのローカルの時間ではなくサーバーの時間を取得して、その時間に応じて処理を行ってみます。
※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;
}
});
【参考サイト】
コメントが承認されるまで時間がかかります。