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

■ JavaScript - サンプル集(257種類) - 画像
   - グラフィカル時計

現在時刻を画像で表示するスクリプトです。

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





[ ソース ]

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

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

	function jikann()
		{
		jikoku=new Date();
		jikan=String(jikoku.getHours());
		hunn=String(jikoku.getMinutes());

		pic=new Array();
		for(i=0;i<10;i++)
			{
			pic[i]=new Image();
			pic[i].src=i+".gif";
			}

		if(jikan.length==1)
			{
			document.images["ji1"].src=pic[0].src;
			document.images["ji2"].src=pic[jikan].src;
			}
		else if(jikan.length==2)
			{
			document.images["ji1"].src=pic[jikan.charAt(0)].src;
			document.images["ji2"].src=pic[jikan.charAt(1)].src;
			}
		if(hunn.length==1)
			{
			document.images["hunn1"].src=pic[0].src;
			document.images["hunn2"].src=pic[hunn].src;
			}
		else if(hunn.length==2)
			{
			document.images["hunn1"].src=pic[hunn.charAt(0)].src;
			document.images["hunn2"].src=pic[hunn.charAt(1)].src;
			}
		}

//-->
</script>

</head>

<body onLoad="jikann();">

<table cellspacing="0" cellpadding="0" border="0">
<tr>
<td><img src="0.gif" name="ji1" width="25" height="30"></td>
<td><img src="0.gif" name="ji2" width="25" height="30"></td>
<td><img src="coron.gif" width="25" height="30"></td>
<td><img src="0.gif" name="hunn1" width="25" height="30"></td>
<td><img src="0.gif" name="hunn2" width="25" height="30"></td>
</tr></table>

</body></html>


[ 解説 ]

まず0〜9までの画像と「:」の画像を用意します。
画像の置き場所は、HTMLと同じディレクトリに設置して下さい。

0〜9までの画像を作るときに、必ず名前を数字で付けて下さい。
「0」の画像ならば「0.gif」、「1」の画像ならば「1.gif」と言うように。

下から8〜4行目に、画像タグがあります。現在は幅が25、高さが30で 設定しています。これは使用する画像によって、お好きなサイズに変更して下さい。

他にボディタグへの属性なども変えて下さって結構です。


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

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