WEST MiRa(1,739 Byte)
JavaScript(1,601 Byte)

■ JavaScript - サンプル集(257種類) - リンク
   - 時間ごとに異なるリンク表示(時間ごと)

時間ごとに異なるリンクが表示されるスクリプトです。
これは1時間に一回、表示されるリンクが変わるバージョンです。

リンクを画像にしたい場合は、補足をご覧下さい。
補足は、ページの下部にあります。

サンプルを見る
ソースを保存する
(右クリック→「対象をファイルに保存」or「リンクを名前を付けて保存」して下さい。)
ソースを見る
解説を見る





[ ソース ]

<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
</head>

<body>

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	//ファイルがあるディレクトリを指定する
	//このHTMLと同じディレクトリにある時は何も記入せず初期状態のままにする
	dir="";

	//ファイルの拡張子を指定する
	files="html";

	my_name=new Array();
	//各時刻のリンクの文字を指定する
	my_name[0] ='0時のリンク';
	my_name[1] ='1時のリンク';
	my_name[2] ='2時のリンク';
	my_name[3] ='3時のリンク';
	my_name[4] ='4時のリンク';
	my_name[5] ='5時のリンク';
	my_name[6] ='6時のリンク';
	my_name[7] ='7時のリンク';
	my_name[8] ='8時のリンク';
	my_name[9] ='9時のリンク';
	my_name[10]='10時のリンク';
	my_name[11]='11時のリンク';
	my_name[12]='12時のリンク';
	my_name[13]='13時のリンク';
	my_name[14]='14時のリンク';
	my_name[15]='15時のリンク';
	my_name[16]='16時のリンク';
	my_name[17]='17時のリンク';
	my_name[18]='18時のリンク';
	my_name[19]='19時のリンク';
	my_name[20]='20時のリンク';
	my_name[21]='21時のリンク';
	my_name[22]='22時のリンク';
	my_name[23]='23時のリンク';

	jikoku=new Date();
	jikan=jikoku.getHours();
	document.write('<a href="'+dir+jikan+"."+files+'">'+my_name[jikan]+'</a>');

//-->
</script>

<noscript>
 	<a href="../../index.html">JavaScript非対応のリンク</a>
</noscript>

 ・
 ・
 ・

</body></html>


[ 解説 ]

まず最初に、時間ごとに表示させたいページを24ページ用意して下さい。

この時注意していただきたいのは、ファイル名を数字で付ける事です。
1時に表示させたい画像には「1.html」と、5時に表示させたい画像には「5.html」と、 20時に表示させたい画像には「20.html」と言うように。
それと必ず、ファイル名は半角数字で付けて下さい。

次に、もし用意したHTMLが「.html」以外の拡張子ならば、 上から9行目にある「html」を実際に使用しているファイルの拡張子にご変更下さい。

表示させたいページの拡張子が「html」の場合は、何も変更しなくて結構です。

次に、もし用意したHTMLがスクリプトを掲載したファイルと別のディレクトリにある場合は、上から9行目にある
dir="";
に、適切なディレクトリをお書き下さい。

例えば、スクリプトを掲載したファイルが「abc」フォルダにあり、 表示させたいリンク先のページは「abc」フォルダ内の「def」フォルダにある場合は、以下のように書きます。

dir="def/";

最後に、表示させるリンクの文字列を指定します。
上から12行目〜35行目が記入する場所です。

上から順に0時のリンクの文字列、
1時のリンクの文字列、
2時のリンクの文字列
……と、なっています。

お好きなように書き換えてください。

下の方にある
<a href="../../index.html">JavaScript非対応のリンク</a>
は、JavaScript非対応の場合に表示させるリンクです。
非対応の場合は何も表示させたくないのなら、何も書かなくて結構です。

例:何も表示させたくない場合
<noscript>
</noscript>

(補足1)

午前・午後に表示するリンク文字を画像に変えたい場合、 リンク文字列に指定したい画像タグをお書き下さい。

例)
my_name1='<img src="../button1.gif">';

(補足2)

クリックされた時に、新ウィンドウでリンク先を表示したい場合は、 下から12行目を以下のようにご変更下さい。

document.write('<a href="'+dir+jikan+"."+files+'" target="_top">'+my_name[jikan]+'</a>');

に書き換えてください。


バナー、リンクについて  ,   利用規約  ,   ヘルプ

Copyright (C) 1998-2007 WEST MiRa. All rights reserved.