Clock -with Image-

Description:

タイトルどおり画像を用いたグラフィカルな時計です。 見た目だけはいいです。

1-9の画像と、コロンの画像(colon.gif)をご用意下さい。

Demo:

Source:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>

<script language="JavaScript" type="text/javascript">
<!--
if(document.images) {
 var clockimgdir = "../_image/clock_num/";  //数字画像が保存されているディレクトリまでのパス。
 var clockcolon  = "colon.gif";             //コロン「：」画像のファイル名

 var num = new Array()
 for(i=0; i<=9; i++) {
  num[i] = new Image(); num[i].src  = clockimgdir +i+ ".gif";
 }
}

function clockImage() {
 if(document.images) {
  var now =new Date()
  var h = new String(now.getHours());  if(eval(h) <10) h = "0" +h;
  var m = new String(now.getMinutes()); if(eval(m) <10) m = "0" +m; 
  var s = new String(now.getSeconds()); if(eval(s) <10) s = "0" +s;

  document.hou0.src = num[h.charAt(0)].src;
  document.hou1.src = num[h.charAt(1)].src;
  document.min0.src = num[m.charAt(0)].src;
  document.min1.src = num[m.charAt(1)].src;
  document.sec0.src = num[s.charAt(0)].src;
  document.sec1.src = num[s.charAt(1)].src;
  setTimeout('clockImage()',1000);
 }
}
//-->
</script>

</head>

<body onload="clockImage()">


<!-- 時計 -->
<script language="JavaScript" type="text/javascript">
<!--
if(document.images) {
 document.write("<img src='"+clockimgdir+"0.gif' name='hou0'>");
 document.write("<img src='"+clockimgdir+"0.gif' name='hou1'>");
 document.write("<img src='"+clockimgdir+clockcolon+"'>");
 document.write("<img src='"+clockimgdir+"0.gif' name='min0'>");
 document.write("<img src='"+clockimgdir+"0.gif' name='min1'>");
 document.write("<img src='"+clockimgdir+clockcolon+"'>");
 document.write("<img src='"+clockimgdir+"0.gif' name='sec0'>");
 document.write("<img src='"+clockimgdir+"0.gif' name='sec1'>");
 }
//-->
</script>


</body>
</html>

Advice:

Arrangement:

Browser:

Internet Explorer4.0以上
Netscape Navigator3.0以上
[ Back ]