2 <!-- Thank you to Toby Pitman for posting this really cool article (and
3 javascript / css / image) explaining how to make a running analog
4 clock webpage. See: http://css-tricks.com/css3-clock for more info. -->
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>Analog Clock</title>
7 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
8 <style type="text/css">
14 background-color: #222222;
26 border-collapse:collapse;
42 margin: 20px auto 0 auto;
62 background: url("clockimg/sechand.png");
66 background: url("clockimg/minhand.png");
74 background: url("clockimg/hourhand.png");
81 <script type="text/javascript">
84 $.fn.preload = function() {
85 this.each(function() {
86 $('<img/>')[0].src = this;
90 var face = new Image();
91 face.onload = function() {
92 $("#clock").css("background", "url(clockimg/smallface.gif)");
94 face.src = "clockimg/smallface.gif";
134 $(digit_images).preload();
136 // Rotate second hand and set seconds.
139 var date = new Date();
140 var ms = date.getMilliseconds();
141 var seconds = date.getSeconds();
142 var sdegree = seconds * 6 + (ms / 166);
143 var srotate = "rotate(" + sdegree + "deg)";
144 $("#sec").css({"-moz-transform" : srotate,
145 "-webkit-transform" : srotate});
146 var s1 = Math.floor(seconds / 10);
147 var s2 = seconds % 10;
148 $("#s1").css({"content" : "url(" + digit_images[s1] + ")"});
149 $("#s2").css({"content" : "url(" + digit_images[s2] + ")"});
152 // Rotate minute hand and set minutes.
153 function updateMinutes() {
154 var date = new Date();
155 var mins = date.getMinutes();
156 var seconds = date.getSeconds();
157 var mdegree = mins * 6 + (seconds / 10);
158 var mrotate = "rotate(" + mdegree + "deg)";
159 $("#min").css({"-moz-transform" : mrotate,
160 "-webkit-transform" : mrotate});
161 var m1 = Math.floor(mins / 10);
163 $("#m1").css({"content" : "url(" + digit_images[m1] + ")"});
164 $("#m2").css({"content" : "url(" + digit_images[m2] + ")"});
167 setInterval(function(){updateMinutes();}, 1000);
169 // Rotate hour hand and set hours.
170 function updateHours() {
171 var date = new Date();
172 var hours = date.getHours();
173 var mins = date.getMinutes();
174 var hdegree = hours * 30 + (mins / 2);
175 var hrotate = "rotate(" + hdegree + "deg)";
176 $("#hour").css({"-moz-transform" : hrotate,
177 "-webkit-transform" : hrotate});
184 var h1 = Math.floor(hours / 10);
186 $("#h1").css({"content" : "url(" + digit_images[h1] + ")"});
187 $("#h2").css({"content" : "url(" + digit_images[h2] + ")"});
190 setInterval(function(){updateHours();}, 1000);
192 function updateDate() {
193 var date = new Date();
194 var day = date.getDate();
195 var d1 = Math.floor(day / 10);
197 $("#d1").css({"content" : "url(" + digit_images[d1] + ")"});
198 $("#d2").css({"content" : "url(" + digit_images[d2] + ")"});
199 $("#dd1").css({"content" : "url(" + digit_images[d1] + ")"});
200 $("#dd2").css({"content" : "url(" + digit_images[d2] + ")"});
201 var dow = date.getDay();
202 $("#dow").css({"content" : "url(" + day_images[dow] + ")"});
203 var month = date.getMonth();
204 $("#mm").css({"content" : "url(" + month_images[month] + ")"});
207 setInterval(function(){updateDate();}, 1000);
212 <table border=0 width=100%>
217 <table style="background-color:#999999" border>
218 <td><img src="0.png" height=26 id="d1" class="digit"></td>
219 <td><img src="1.png" height=26 id="d2" class="digit"></td>
227 <td STYLE="vertical-align:middle">
228 <li><div id="analog">
230 <table style="background-color:#999999;height:80px;" border>
232 <td><img src="clockimg/2.png" id="h1" class="digit"></td>
233 <td><img src="clockimg/3.png" id="h2" class="digit"></td>
234 <td style="border: none"> </td>
235 <td><img src="clockimg/4.png" id="m1" class="digit"></td>
236 <td><img src="clockimg/5.png" id="m2" class="digit"></td>
237 <td style="border: none"> </td>
238 <td><img src="clockimg/6.png" id="s1" class="digit"></td>
239 <td><img src="clockimg/7.png" id="s2" class="digit"></td>
243 <table style="background-color:#999999;height:80px;" border>
245 <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
246 <td style="border: none"> </td>
247 <td><img src="clockimg/8.png" id="dd1" class="digit"></td>
248 <td><img src="clockimg/9.png" id="dd2" class="digit"></td>
249 <td style="border: none"> </td>
250 <td><img src="clockimg/jan.png" id="mm" class="digit"></td>