更新せず放置するだけ！楽天でボーナス払いの設定をしていて、2つの期間だけボーナス払いができないので、現在の日付がその期間に該当する場合のみ「ボーナス払いができません」の表示をする方法
楽天Tips関連記事
楽天スマホで使える！classを使わずにcssを適用する裏技
指定時間に自動タイマーで切り替わる！楽天のバナーをcsvで管理する【jQuery】
jQueryで現在の日付で判別し、対象期間中だけテキストを表示する
cssだけ！jQueryを使わないスマホでよくある横から出てくるドロワーメニュー
【RMS】楽天スマホに禁止タグのiframeを入れる裏技
【jQuery】営業日・定休日カレンダーを簡単に管理する
jquery.csv.jsで、csvデータをクエリパラメーターで出力htmlを振り分ける
jQueryで現在の時刻を判別し、表示するバナーを切り替える
jQueryでiframe内から親ページをリダイレクトさせる
条件
・「6/16～7/15」と、「11/16～12/15」の期間に該当するとテキストを表示する。
・上の２つの期間は毎年変わらない（はず）。
デモは現在の日付とinputで入力した日付で動作確認できます。
現在の日付だけだと見れない事の方が多いのでw
inputの方は判別期間が今年になっているので今年の範囲内で試してみてください。
日付の定義をする
js
var startDate = "",
endDate = "",
dateText = "";
var now_year = new Date().getFullYear();
var startDate1st = new Date(now_year+"/6/16 00:00"),
endDate1st = new Date(now_year+"/7/15 23:59"),
text1st = "6/16～7/15";
var startDate2nd = new Date(now_year+"/11/16 00:00"),
endDate2nd = new Date(now_year+"/12/15 23:59"),
text2nd = "11/16～12/15";
var nowDate = new Date();
now_yearで現在の西暦で取得してstartDate1stとstartDate2ndに入れています。
こうすれば毎年期間の変更がなければページを見た時の年が自動で入るので更新する必要がなくなります。
また、翌年の1月とかに期間がなってしまうとその部分を変更しなきゃなんで面倒ですが、とりあえず大丈夫そうです。
nowDateに今の日時を入れて、あとはこれらを比較して期間が近い方で判別させるだけです。
日付の比較して今に近い方の期間を判別する
js
var sabun1 = Math.abs(Math.ceil((nowDate - startDate1st) / 86400000)),
sabun2 = Math.abs(Math.ceil((nowDate - startDate2nd) / 86400000));
if (sabun1 <= sabun2) {
startDate = startDate1st;
endDate = endDate1st;
dateText = text1st;
}else if (sabun1 >= sabun2){
startDate = startDate2nd;
endDate = endDate2nd;
dateText = text2nd;
}
sabun1でやってることは、まず今の日付と期間1の開始日を引きます。jsは直接日付の計算ができるので素敵ですね!
引くとミリ秒で結果が出るので、秒、分、時、日に直すと1000*60*60*24なので、1日が86400000で割ると日数が計算できます。
ただ、値がマイナスだと計算が面倒なのでMath.abs()で絶対値をとっています。
sabun2も同じことをやって、どちらが今の日付に近いかで最終判定に使う値を入れていきます。
今が期間内ならhtmlを変更する
js
if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
$("#bonus").html(dateText + 'の間は、対象期間内。');
}else{
$("#bonus").html("対象期間外");
}
if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {で期間内かを調べます。
【jquery】現在の時刻によって表示するバナーを切り替えるのものを使っています。
今回の場合だとelse以降はいらないですね。
まとめ
js
$(document).ready(function() {
var startDate = "",
endDate = "",
dateText = "";
var now_year = new Date().getFullYear();
var startDate1st = new Date(now_year+"/6/16 00:00"),
endDate1st = new Date(now_year+"/7/15 23:59"),
text1st = "6/16～7/15";
var startDate2nd = new Date(now_year+"/11/16 00:00"),
endDate2nd = new Date(now_year+"/12/15 23:59"),
text2nd = "11/16～12/15";
var nowDate = new Date();
var sabun1 = Math.abs(Math.ceil((nowDate - startDate1st) / 86400000)),
sabun2 = Math.abs(Math.ceil((nowDate - startDate2nd) / 86400000));
if (sabun1 <= sabun2) {
startDate = startDate1st;
endDate = endDate1st;
dateText = text1st;
}else if (sabun1 >= sabun2){
startDate = startDate2nd;
endDate = endDate2nd;
dateText = text2nd;
}
if (startDate <= nowDate && (!endDate || nowDate <= endDate)) {
$("#bonus").html(dateText + 'の間は、対象期間内。');
}else{
$("#bonus").html("対象期間外");
}
});
今までのコードを合わせるとこんな感じです。ざっくり動作確認はしていますが、よっぽど大丈夫だと思います。
もし、期間の丁度真ん中で間違った方の期間で比べたとしても、そもそもの判定期間外なのは確実なので表示されることはありません。
一番危険なのは、２つの期間が毎年固定ではなかったときですね。
その場合は年に1回くらい更新してくださいね！
コメント