-<head>
<!-- Thank you to Toby Pitman for posting this really cool article (and
javascript / css / image) explaining how to make a running analog
clock webpage. See: http://css-tricks.com/css3-clock for more info. -->
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>Analog Clock</title>
- <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
- <style type="text/css">
+<head>
+<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
+<style type="text/css">
* {
margin: 0px;
padding: 0px;
line-height:0.5;
}
#clock {
- position: relative;
+ position: absolute;
+ top: 100px;
+ left: 120px;
width: 600px;
height: 600px;
margin: 20px auto 0 auto;
+ float: none;
+ // background-image: url("clockimg/smallface.gif");
list-style: none;
}
#analog {
- position: relative;
+ position: absolute;
+ top: 200px;
+ left: 750px;
width: 100%;
+ float: none;
+ }
+ #bottom {
+ position: absolute;
+ top: 750px;
}
#txt {
position: absolute;
.digit {
display: block;
}
- </style>
- <script type="text/javascript">
+</style>
+<script type="text/javascript">
$(document).ready(
function() {
$.fn.preload = function() {
var s2 = seconds % 10;
$("#s1").css({"content" : "url(" + digit_images[s1] + ")"});
$("#s2").css({"content" : "url(" + digit_images[s2] + ")"});
- }, 75);
+ }, 125);
// Rotate minute hand and set minutes.
function updateMinutes() {
$("#m2").css({"content" : "url(" + digit_images[m2] + ")"});
}
updateMinutes();
- setInterval(function(){updateMinutes();}, 1000);
+ setInterval(function(){updateMinutes();}, 3000);
// Rotate hour hand and set hours.
function updateHours() {
$("#h2").css({"content" : "url(" + digit_images[h2] + ")"});
}
updateHours();
- setInterval(function(){updateHours();}, 1000);
+ setInterval(function(){updateHours();}, 10000);
function updateDate() {
var date = new Date();
$("#mm").css({"content" : "url(" + month_images[month] + ")"});
}
updateDate();
- setInterval(function(){updateDate();}, 1000);
+ setInterval(function(){updateDate();}, 10000);
});
</script>
</head>
<body>
- <table border=0 width=100%>
- <tr>
- <td width=50%>
- <ul id="clock">
- <div id="txt">
- <table style="background-color:#999999" border>
- <td><img src="0.png" height=26 id="d1" class="digit"></td>
- <td><img src="1.png" height=26 id="d2" class="digit"></td>
- </table>
- </div>
- <li id="sec"></li>
- <li id="hour"></li>
- <li id="min"></li>
- </ul>
- </td>
- <td STYLE="vertical-align:middle">
- <li><div id="analog">
- <center>
- <table style="background-color:#999999;height:80px;" border>
- <tr>
- <td><img src="clockimg/2.png" id="h1" class="digit"></td>
- <td><img src="clockimg/3.png" id="h2" class="digit"></td>
- <td style="border: none"> </td>
- <td><img src="clockimg/4.png" id="m1" class="digit"></td>
- <td><img src="clockimg/5.png" id="m2" class="digit"></td>
- <td style="border: none"> </td>
- <td><img src="clockimg/6.png" id="s1" class="digit"></td>
- <td><img src="clockimg/7.png" id="s2" class="digit"></td>
- </tr>
- </table>
- <br>
- <table style="background-color:#999999;height:80px;" border>
- <tr>
- <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
- <td style="border: none"> </td>
- <td><img src="clockimg/8.png" id="dd1" class="digit"></td>
- <td><img src="clockimg/9.png" id="dd2" class="digit"></td>
- <td style="border: none"> </td>
- <td><img src="clockimg/jan.png" id="mm" class="digit"></td>
- </tr>
- </table>
- </center>
- </div>
- </li>
- </ul>
- </td>
- </tr>
- </table>
-</body>
-</html>
+ <div style="height:775px; float:none">
+ <ul id="clock">
+ <div id="txt">
+ <table style="background-color:#999999" border>
+ <td><img src="0.png" height=26 id="d1" class="digit"></td>
+ <td><img src="1.png" height=26 id="d2" class="digit"></td>
+ </table>
+ </div>
+ <li id="sec"></li>
+ <li id="hour"></li>
+ <li id="min"></li>
+ <li><div id="analog">
+ <center>
+ <table style="background-color:#999999;height:80px;" border>
+ <tr>
+ <td><img src="clockimg/2.png" id="h1" class="digit"></td>
+ <td><img src="clockimg/3.png" id="h2" class="digit"></td>
+ <td style="border: none"> </td>
+ <td><img src="clockimg/4.png" id="m1" class="digit"></td>
+ <td><img src="clockimg/5.png" id="m2" class="digit"></td>
+ <td style="border: none"> </td>
+ <td><img src="clockimg/6.png" id="s1" class="digit"></td>
+ <td><img src="clockimg/7.png" id="s2" class="digit"></td>
+ </tr>
+ </table>
+ <br>
+ <table style="background-color:#999999;height:80px;" border>
+ <tr>
+ <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
+ <td style="border: none"> </td>
+ <td><img src="clockimg/8.png" id="dd1" class="digit"></td>
+ <td><img src="clockimg/9.png" id="dd2" class="digit"></td>
+ <td style="border: none"> </td>
+ <td><img src="clockimg/jan.png" id="mm" class="digit"></td>
+ </tr>
+ </table>
+ </center>
+ </div></li>
+ </ul>
+ </div>