JavaScriptによるリアルタイムカウントダウン
自分のホームページ(HTMLファイル)をメモ帳で開いてみましょう。
以下のような英数字の文字列が表示されると思います。
必要な部分を必要な場所にコピー、ペーストするだけの簡単作業で、あなたのホームページにも取り付け可能です。
必要な部分を赤字にしてありますので、マウスで選択し、右クリックして「コピー」しましょう。
尚、大文字・小文字は関係ありません。
<サンプル>
----------------------------- ここからHTML本文 -----------------------------
<HTML> ←必ず最初に記述があります。(1行目か2行目あたり)
<HEAD> ←必ず記述がどこかにあります。(比較的上の方)ここから下の赤字部分を、<HEAD>〜</HEAD>の間に記述します。
<Script Language="JavaScript">
<!--リアルタイムカウントダウン
now = new Date();
n = 0;
xday = new Date(2010, 1-1, 1, 0, 0, 0); // ←Date(2010, 1-1, 1,
0, 0, 0)にカウントダウン対象の日付をセットします。2010年1月1日0時0分0秒という意味です。
var datef = new Array(24 * 60 * 60 * 1000, //D
60 * 60 * 1000, //H
60 * 1000, //M
1000 ); //S
function countDown() {
var time = new Array(4);
var deff = Math.abs( (now.getTime() + n) - xday.getTime() );
n += 1000;
for(i=0;i<4;i++){
time[i] = Math.floor( deff / datef[i] );
deff -= time[i] * datef[i];
}
document.Clock.displayday.value = time[0];
document.Clock.displayhour.value = time[1];
document.Clock.displaymin.value = time[2];
document.Clock.displaysec.value = time[3];
setTimeout("countDown()",1000);
}
// end-->
</Script>
</HEAD>
<BODY> ←比較的上のほうにあります。(<HEAD>タグの少し下あたり)ここから下の赤字部分を、<BODY>〜</BODY>の間で、表示したい場所に記述します。
<form name="Clock" method="post" action="./">
2002年まで残り<br>
<input type="text" name="displayday" size="2">
<strong>日</strong>
<input type="text" name="displayhour" size=2>
<strong>時間</strong>
<input type="text" name="displaymin" size=2>
<strong>分</strong>
<input type="text" name="displaysec" size=2>
<strong>秒</strong>
</form>
<Script Language="JavaScript">
<!-- Start
countDown();
// -->
</Script>
</BODY>
</HTML>
----------------------------- ここまでHTML本文 -----------------------------
|