[JavaScript,PHP] 新年の挨拶を自動的に表示する

新年に限らず、イベントにちょっとしたアクションを起こしたい人向けのスクリプト。
例は簡単にできる画像変更なんですが
やってることはタイムスタンプによる比較なんで、これを応用すればいろいろなことが出来ます。

まず挨拶の画像を用意したら、表示したい場所にこっそり透明の画像を仕込んでおく。
透過画像が作れなければ、背景色と同じ色の画像でもOK。サイズは1px×1pxで。

<img src="spacer.gif" alt="" id="hny" />

次のソースをコピペして、コメントがついている部分の値を適切に変更する。

window.onload = function() {

	var imgName = "hny";//変更対象となる画像のID
	var newPass =  "01.jpg";//変更する画像のパス

	var today=new Date();
	var newday = new Date(today.getFullYear()+1,0,1);//月は0~11

	if(today.getTime() >= newday.getTime()){
		document.getElementById(imgName).getAttributeNode("src").value= newPass;
	}
}

headやbodyに入れるとソースでネタバレてしまうので、jsファイルにコピペして読み込ませた方がバレにくい。と思う。

※なお、すでにwindow.onloadを使用している場合は、中身だけコピペしてください。

応用編

元旦以外の日時に変更

次の行を変えます。

var newday = new Date(today.getFullYear(),11,1);

new Date()にアクションを起こしたい日付や時間を指定します。
並び順は左から年, 月, 日, 時, 分です。

new Date(2009, 11, 31, 18, 20)

西暦は4桁、時間は24時間の通しで。
月は0=1月なので、1マイナスした値になります。

期間制限

1月1日~3日の間、みたいに期限を設ける場合

window.onload = function() {

	var imgName = "hny";//変更対象となる画像のID
	var newPass =  "01.jpg";//変更する画像のパス

	var today=new Date();
	var newday = new Date(2011,0,1);

	var limit = new Date(2011,0,3);//期限

	if(today.getTime() >= newday.getTime() && today.getTime() < limit.getTime() ){
		document.getElementById(imgName).getAttributeNode("src").value= newPass;
	}
}

上記の別の日時に変更する場合を参考に、新しく設けた次の行で期限となる日付を設定します。

var limit = new Date((today.getFullYear()+1),0,3,0,0);//期限

上記は来年の1月3日という指定。

PHPの場合

mktime()で1月1日のタイムスタンプを取得して比較する。

$now = time();
$newyear = mktime(0,0,0,0,1,2010);
if($now >= $newyear){
//処理内容
}

PHPとJavascriptの混合

PHPでページの分岐、Javascriptでcookie発行。
判別はタイムスタンプとクッキーの有無。

<?php
$now = time();
$newyear = mktime(0,0,0,0,1,2010);
$limit = mktime(23,59,59,0,3,2010);
if($now <= $newyear):?>
<p>1/1までの表示</p>
<?php elseif($now >= $newyear && $now <= $limit && $_COOKIE["_NEWYEAR_WELCOME"] == ""): ?>
<script type="text/javascript">
//<![CDATA[
function newyear() {
     document.cookie = "_NEWYEAR_WELCOME=true; expires=Mon, 3-Jan-2010 23:59:59;";
     location.href = "index.php";
}
//]]>
</script>
<p>新年の挨拶</p>
<p><a href="javascript:newyear()">挨拶を非表示にする</a></p>
<?php elseif(( $now >= $newyear && isset($_COOKIE["_NEWYEAR_WELCOME"]) && $_COOKIE["_NEWYEAR_WELCOME"] == true )|| $now >= $limit ): ?>
<p>新年以降に表示する内容</p>
<?php endif; ?>

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください