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>