目的の日までのカウントダウンを表示するJavaScriptです。使用法は簡単ですので、JavaScriptを知らなくても、このページのスクリプトをHTMLの中にコピーするだけで利用できます。
このスクリプトでは、目的の日までのカウントダウンだけではなく、当日のメッセージ、翌日以降のメッセージを、現在日に応じて自動的に表示します。目的の日が過ぎてしまっても、マイナスの日数を表示してしまったりすることがありません。
一例として、このスクリプトを使用すると、ホームページをいちいち変更しなくても、現在日に応じて、以下のような３通りのメッセージを表示することができます。最後のメッセージは一定期間後に消すことも可能です。
21世紀まであと 31 日
ついにやって来ました21世紀！
21世紀になっちゃいましたね〜！
上の例のように表示するには、下記のようなHTMLを作成します。
2000年12月1日ならば１番目のメッセージ、ちょうど2001年1月1日には２番目のメッセージ、2001年1月2日以降ならば３番目のメッセージが表示されます。
<HTML>
<HEAD>
<TITLE>Countdown() sample</TITLE>
<!--- カウントダウン JavaScript ver.2 by 甲斐駒電脳工房 --->
<SCRIPT LANGUAGE="JavaScript">
function Countdown(yy, mm, dd, days, msg1, msg2, msg3, msg4){
var today = new Date();
var xDay = new Date(yy, mm-1, dd);
d = (xDay.getTime() - today.getTime()) / (24*60*60*1000);
d = Math.ceil(d);
if (d > 0){
document.write(msg1);
document.write(d);
document.write(msg2);
}else if (d == 0){
document.write(msg3);
}else{
if (d * -1 < days || days == 0){
document.write(msg4);
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<!--- カウントダウン JavaScript の呼び出し --->
<SCRIPT LANGUAGE="JavaScript">
Countdown(2001, 1, 1, 0,
'<B>21世紀まであと <FONT COLOR=#FF0000>',
'</FONT> 日</B>',
'<B>ついにやって来ました21世紀！</B>',
'<B>21世紀になっちゃいましたね〜！</B>');
</SCRIPT>
<P>
</BODY>
</HTML>
↑↑ ここまでフリー素材！ ご自由にコピーしてご利用下さい。↑↑
使用法
上の例の、
<!--- カウントダウン JavaScript ver.2 by 甲斐駒電脳工房 --->から
</SCRIPT>まで（紫色の部分）を、メッセージを表示したいページのHTMLの最初の方（通常、上の例のように、<HEAD>と</HEAD>の間）にコピーします。
この関数そのものは、ホームページには表示されません。この関数を任意の場所から呼び出すことで、呼び出した個所に計算された日数が表示されます。
上の例の、 <!--- カウントダウン JavaScript の呼び出し --->から </SCRIPT>まで（青色の部分）のように、メッセージを表示したい個所に挿入します。呼び出し方は以下の通りです。
Countdown(年, 月, 日, 表示日数, メッセージ１, メッセージ２, メッセージ３, メッセージ４);
目的の日の年（西暦）, 月, 日
目的の日以降メッセージを表示する日数。
ゼロを指定すると、目的の日の翌日以降ずっとメッセージ４を表示します。
目的の日以前に表示する任意のテキストの前半部分。
このテキストに続けて日数が表示されます。
目的の日以前に表示する任意のテキストの後半部分。
日数に続いて表示する文字ですので、通常 "日" などを指定します。
目的の日の当日に表示する任意のテキスト。
目的の日の翌日以降に表示する任意のテキスト。
|
（フリー素材部分を除き）無断転載は固くお断り致します。ご利用上の注意についてはこちらをご覧下さい。