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>