       1: <html>
       2: <head>
       3: <title>nDigiClock</title>
       4: <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
       5: <style>
       6: body {
       7: 	width:130px;
       8: 	height:43px;
       9: 	background: url('images/bg.png');
      10: 	padding:0 0 0 0px;
      11: 	margin: 0 0 0 0px
      12:     position:absolute;
      13: }
      14:
      15: #specular {
      16:     width:130px;
      17:     height:43px;
      18:     position:absolute;
      19:     margin-top:0;
      20:     margin-left:0;
      21:     z-index:8;
      22:     background: url('images/specular.png')
      23: }
      24: #clockpos {
      25:     width:130px;
      26:     height:43px;
      27:     position:absolute;
      28:     margin-top:15;
      29:     margin-left:7;
      30:     z-index:3;
      31: }
      32: </style>
      33:
      34: <script>
      35:
      36: // LED画像読み込み
      37: drs = new Array(11);
      38: for (i = 0; i <= 10; i++) { drs[i] = new Image(); drs[i].src = "images/" + i + "m_R.png"; }
      39: dss = new Array(11);
      40: for (i = 0; i <= 10; i++) { dss[i] = new Image(); dss[i].src = "images/" + i + "m_S.png"; }
      41:
      42: // グローバル変数
      43: var oldDay = 0;
      44: var displayMode = 0;
      45:
      46: // 描画
      47: function DoPaint()
      48: {
      49: 	if (document.images == false) return;
      50:
      51: 	var now = new Date();
      52:
      53: 	if (oldDay != now.getDate()) {
      54: 		clockpos.title = now.getYear() + "年" + (1+now.getMonth()) + "月" + now.getDate() + "日(" + weekStrArray[now.getDay()] + ")";
      55: 		oldDay = now.getDate();
      56: 	}
      57:
      58: 	if (displayMode == 0) { // 時刻表示
      59: 		hh = now.getHours();
      60: 		mm = now.getMinutes();
      61: 		ss = now.getSeconds();
      62: 		if (hh >= 10) {
      63: 			document.images.h1.src = drs[Math.floor(hh / 10)].src;
      64: 			document.images.h2.src = drs[hh % 10].src;
      65: 		}
      66: 		else {
      67: 			document.images.h1.src = drs[10].src;
      68: 			document.images.h2.src = drs[hh % 10].src;
      69: 		}
      70: 		document.images.m1.src = drs[Math.floor(mm / 10)].src;
      71: 		document.images.m2.src = drs[mm % 10].src;
      72:
      73: 		document.images.s1.src = dss[Math.floor(ss / 10)].src;
      74: 		document.images.s2.src = dss[ss % 10].src;
      75: 	}
      76: 	else {	// 日時表示
      77: 		hh = now.getYear() % 100;
      78: 		mm = now.getMonth() + 1;
      79: 		ss = now.getDate();
      80: 		document.images.h1.src = drs[Math.floor(hh / 10)].src;
      81: 		document.images.h2.src = drs[hh % 10].src;
      82:
      83: 		if (mm >= 10) {
      84: 			document.images.m1.src = drs[Math.floor(mm / 10)].src;
      85: 			document.images.m2.src = drs[mm % 10].src;
      86: 		}
      87: 		else {
      88: 			document.images.m1.src = drs[10].src;
      89: 			document.images.m2.src = drs[mm % 10].src;
      90: 		}
      91:
      92: 		if (ss >= 10) {
      93: 			document.images.s1.src = dss[Math.floor(ss / 10)].src;
      94: 			document.images.s2.src = dss[ss % 10].src;
      95: 		}
      96: 		else {
      97: 			document.images.s1.src = dss[10].src;
      98: 			document.images.s2.src = dss[ss % 10].src;
      99: 		}
     100: 	}
     101:
     102: 	setTimeout("DoPaint()",1000);	// 1000msec 後に再表示
     103: }
     104:
     105: // 初期化
     106: function init()
     107: {
     108: 	DoPaint();
     109: }
     110:
     111: // マウスオーバーハンドラ
     112: function pmouseover()
     113: {
     114: 	displayMode = 1;
     115: 	DoPaint();
     116: }
     117:
     118: // マウスアウトハンドラ
     119: function pmouseout()
     120: {
     121: 	displayMode = 0;
     122: 	DoPaint();
     123:
     124: }
     125: </script>
     126: </head>
     127:
     128: <body onLoad="init()" style="width:130px;height:43px;" onmouseover="pmouseover();" onmouseout="pmouseout();">
     129: <!-- スペキュラ -->
     130: <div id="specular"></div>
     131: <!-- 時計本体 -->
     132: <div id="clockpos" >
     133: 	<img src="images/10m_R.png" name="h1"><img
     134: 	src="images/10m_R.png" name="h2"><img
     135: 	src="images/col.png" name="c1"><img
     136: 	src="images/10m_R.png" name="m1"><img
     137: 	src="images/10m_R.png" name="m2">
     138: 	<img src="images/10m_S.png" name="s1"><img
     139: 	src="images/10m_S.png" name="s2">
     140: </div>
     141: </body>
     142: </html>