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>