2015.11.16

jQueryで、特定の日になったら画像を切り替える。

PHPでコンテンツを切り替える、jQuery版です。

<script type="text/javascript">
$(function(){
	myD = new Date();
	myYear = myD.getFullYear();
	myMonth = myD.getMonth() + 1;
	myDate = myD.getDate();
	if(myMonth < 10) { myMonth = "0" + myMonth; }
	if(myDate < 10) { myDate = "0" + myDate; }
	var current = myYear +''+ myMonth +''+ myDate;

	     if (current < 20150101) {current = 'img001';}
	else if (current < 20150201) {current = 'img002';}
	else if (current < 20150301) {current = 'img003';}
	else if (current < 20150401) {current = 'img004';}

	$('#contents img').attr({src: 'img/'+current+'.jpg'});
});
</script>

まず現在の時間を変数currentに格納します。
その際、JavaScriptで普通に時間を取得すると
月と日(と時間)が一桁の場合は頭の「0」を出力しないため、
一桁の場合は頭に「0」をつけてあげます。

変数currentの値を条件分岐して、画像が切り替わるようにします。
上の例では、jQuery「attr」を使ってimgタグのsrc属性を書き換えていますが、
「html」やなどのHTMLタグを内包できるメソッドを使えば、
ブロックコンテンツごと切り替えることができます。

PHPを使うことができない環境で役に立つと思います。

このテクニックを使う際は1点注意が必要で、
jQuery(というよりもJavaScript)はHTMLが読み込まれてから実行されるため、
ページが開かれた瞬間は、以前の画像やコンテンツが表示されてしまうことがあります。