pages/clock_10_none.html

   1 <head>
   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">
   9     * {
  10       margin: 0px;
  11       padding: 0px;
  12     }
  13     body {
  14       background-color: #222222;
  15     }
  16     div#time {
  17       color:#dddddd;
  18     }
  19     div#date{
  20       color:#dddddd;
  21     }
  22     table {
  23       margin:0px;
  24       border-spacing:0px;
  25       padding:0px;
  26       border-collapse:collapse;
  27       font-size:100%;
  28       line-height:0.5;
  29     }
  30     tr {
  31       font-size:100%;
  32       line-height:0.5;
  33     }
  34     td {
  35       font-size:100%;
  36       line-height:0.5;
  37     }
  38     #clock {
  39       position: relative;
  40       width: 600px;
  41       height: 600px;
  42       margin: 20px auto 0 auto;
  43       list-style: none;
  44     }
  45     #analog {
  46       position: relative;
  47       width: 100%;
  48     }
  49     #txt {
  50       position: absolute;
  51       top: 280px;
  52       left: 375px;
  53     }
  54     #sec, #min, #hour {
  55       position: absolute;
  56       width: 30px;
  57       height: 600px;
  58       top: 0px;
  59       left: 285px;
  60     }
  61     #sec {
  62       background: url("clockimg/sechand.png");
  63       z-index: 3;
  64     }
  65     #min {
  66       background: url("clockimg/minhand.png");
  67       z-index: 2;
  68       width: 30px;
  69       height: 600px;
  70       top: 0px;
  71       left: 285px;
  72     }
  73     #hour {
  74       background: url("clockimg/hourhand.png");
  75       z-index: 1;
  76     }
  77     .digit {
  78       display: block;
  79     }
  80   </style>
  81   <script type="text/javascript">
  82     $(document).ready(
  83       function() {
  84         $.fn.preload = function() {
  85           this.each(function() {
  86             $('<img/>')[0].src = this;
  87           });
  88         }
  89
  90         var face = new Image();
  91         face.onload = function() {
  92           $("#clock").css("background", "url(clockimg/smallface.gif)");
  93         }
  94         face.src = "clockimg/smallface.gif";
  95
  96         var digit_images = [
  97           "clockimg/0.png",
  98           "clockimg/1.png",
  99           "clockimg/2.png",
 100           "clockimg/3.png",
 101           "clockimg/4.png",
 102           "clockimg/5.png",
 103           "clockimg/6.png",
 104           "clockimg/7.png",
 105           "clockimg/8.png",
 106           "clockimg/9.png"
 107         ];
 108
 109         var month_images = [
 110           "clockimg/jan.png",
 111           "clockimg/feb.png",
 112           "clockimg/mar.png",
 113           "clockimg/apr.png",
 114           "clockimg/may.png",
 115           "clockimg/jun.png",
 116           "clockimg/jul.png",
 117           "clockimg/aug.png",
 118           "clockimg/sep.png",
 119           "clockimg/oct.png",
 120           "clockimg/nov.png",
 121           "clockimg/dec.png"
 122         ];
 123
 124         var day_images = [
 125           "clockimg/sun.png",
 126           "clockimg/mon.png",
 127           "clockimg/tue.png",
 128           "clockimg/wed.png",
 129           "clockimg/thu.png",
 130           "clockimg/fri.png",
 131           "clockimg/sat.png",
 132         ]
 133
 134         $(digit_images).preload();
 135
 136         // Rotate second hand and set seconds.
 137         setInterval(
 138           function() {
 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] + ")"});
 150           }, 75);
 151
 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);
 162           var m2 = mins % 10;
 163           $("#m1").css({"content" : "url(" + digit_images[m1] + ")"});
 164           $("#m2").css({"content" : "url(" + digit_images[m2] + ")"});
 165         }
 166         updateMinutes();
 167         setInterval(function(){updateMinutes();}, 1000);
 168
 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});
 178           if (hours > 12) {
 179             hours = hours - 12;
 180           }
 181           if (hours <= 0) {
 182             hours = 12;
 183           }
 184           var h1 = Math.floor(hours / 10);
 185           var h2 = hours % 10;
 186           $("#h1").css({"content" : "url(" + digit_images[h1] + ")"});
 187           $("#h2").css({"content" : "url(" + digit_images[h2] + ")"});
 188         }
 189         updateHours();
 190         setInterval(function(){updateHours();}, 1000);
 191
 192         function updateDate() {
 193           var date = new Date();
 194           var day = date.getDate();
 195           var d1 = Math.floor(day / 10);
 196           var d2 = 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] + ")"});
 205         }
 206         updateDate();
 207         setInterval(function(){updateDate();}, 1000);
 208       });
 209   </script>
 210 </head>
 211 <body>
 212   <table border=0 width=100%>
 213     <tr>
 214       <td width=50%>
 215         <ul id="clock">
 216           <div id="txt">
 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>
 220             </table>
 221           </div>
 222           <li id="sec"></li>
 223           <li id="hour"></li>
 224           <li id="min"></li>
 225         </ul>
 226       </td>
 227       <td STYLE="vertical-align:middle">
 228           <li><div id="analog">
 229             <center>
 230               <table style="background-color:#999999;height:80px;" border>
 231                 <tr>
 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">&nbsp;&nbsp;</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">&nbsp;&nbsp;</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>
 240                 </tr>
 241               </table>
 242               <br>
 243               <table style="background-color:#999999;height:80px;" border>
 244                 <tr>
 245                 <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
 246                 <td style="border: none">&nbsp;&nbsp;</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">&nbsp;&nbsp;</td>
 250                 <td><img src="clockimg/jan.png" id="mm" class="digit"></td>
 251                 </tr>
 252               </table>
 253             </center>
 254             </div>
 255           </li>
 256         </ul>
 257       </td>
 258     </tr>
 259   </table>
 260 </body>
 261 </html>