pages/clock_10_none.html

   1 <!-- Thank you to Toby Pitman for posting this really cool article (and
   2      javascript / css / image) explaining how to make a running analog
   3      clock webpage.  See: http://css-tricks.com/css3-clock for more info. -->
   4 <head>
   5 <script type="text/javascript" src="jquery-1.2.6.min.js"></script>
   6 <style type="text/css">
   7     * {
   8       margin: 0px;
   9       padding: 0px;
  10     }
  11     body {
  12       background-color: #222222;
  13     }
  14     div#time {
  15       color:#dddddd;
  16     }
  17     div#date{
  18       color:#dddddd;
  19     }
  20     table {
  21       margin:0px;
  22       border-spacing:0px;
  23       padding:0px;
  24       border-collapse:collapse;
  25       font-size:100%;
  26       line-height:0.5;
  27     }
  28     tr {
  29       font-size:100%;
  30       line-height:0.5;
  31     }
  32     td {
  33       font-size:100%;
  34       line-height:0.5;
  35     }
  36     #clock {
  37       position: absolute;
  38       top: 100px;
  39       left: 120px;
  40       width: 600px;
  41       height: 600px;
  42       margin: 20px auto 0 auto;
  43       float: none;
  44       // background-image: url("clockimg/smallface.gif");
  45       list-style: none;
  46     }
  47     #analog {
  48       position: absolute;
  49       top: 200px;
  50       left: 750px;
  51       width: 100%;
  52       float: none;
  53     }
  54     #bottom {
  55       position: absolute;
  56       top: 750px;
  57     }
  58     #txt {
  59       position: absolute;
  60       top: 280px;
  61       left: 375px;
  62     }
  63     #sec, #min, #hour {
  64       position: absolute;
  65       width: 30px;
  66       height: 600px;
  67       top: 0px;
  68       left: 285px;
  69     }
  70     #sec {
  71       background: url("clockimg/sechand.png");
  72       z-index: 3;
  73     }
  74     #min {
  75       background: url("clockimg/minhand.png");
  76       z-index: 2;
  77       width: 30px;
  78       height: 600px;
  79       top: 0px;
  80       left: 285px;
  81     }
  82     #hour {
  83       background: url("clockimg/hourhand.png");
  84       z-index: 1;
  85     }
  86     .digit {
  87       display: block;
  88     }
  89 </style>
  90 <script type="text/javascript">
  91     $(document).ready(
  92       function() {
  93         $.fn.preload = function() {
  94           this.each(function() {
  95             $('<img/>')[0].src = this;
  96           });
  97         }
  98
  99         var face = new Image();
 100         face.onload = function() {
 101           $("#clock").css("background", "url(clockimg/smallface.gif)");
 102         }
 103         face.src = "clockimg/smallface.gif";
 104
 105         var digit_images = [
 106           "clockimg/0.png",
 107           "clockimg/1.png",
 108           "clockimg/2.png",
 109           "clockimg/3.png",
 110           "clockimg/4.png",
 111           "clockimg/5.png",
 112           "clockimg/6.png",
 113           "clockimg/7.png",
 114           "clockimg/8.png",
 115           "clockimg/9.png"
 116         ];
 117
 118         var month_images = [
 119           "clockimg/jan.png",
 120           "clockimg/feb.png",
 121           "clockimg/mar.png",
 122           "clockimg/apr.png",
 123           "clockimg/may.png",
 124           "clockimg/jun.png",
 125           "clockimg/jul.png",
 126           "clockimg/aug.png",
 127           "clockimg/sep.png",
 128           "clockimg/oct.png",
 129           "clockimg/nov.png",
 130           "clockimg/dec.png"
 131         ];
 132
 133         var day_images = [
 134           "clockimg/sun.png",
 135           "clockimg/mon.png",
 136           "clockimg/tue.png",
 137           "clockimg/wed.png",
 138           "clockimg/thu.png",
 139           "clockimg/fri.png",
 140           "clockimg/sat.png",
 141         ]
 142
 143         $(digit_images).preload();
 144
 145         // Rotate second hand and set seconds.
 146         setInterval(
 147           function() {
 148             var date = new Date();
 149             var ms = date.getMilliseconds();
 150             var seconds = date.getSeconds();
 151             var sdegree = seconds * 6 + (ms / 166);
 152             var srotate = "rotate(" + sdegree + "deg)";
 153             $("#sec").css({"-moz-transform" : srotate,
 154                            "-webkit-transform" : srotate});
 155             var s1 = Math.floor(seconds / 10);
 156             var s2 = seconds % 10;
 157             $("#s1").css({"content" : "url(" + digit_images[s1] + ")"});
 158             $("#s2").css({"content" : "url(" + digit_images[s2] + ")"});
 159           }, 125);
 160
 161         // Rotate minute hand and set minutes.
 162         function updateMinutes() {
 163           var date = new Date();
 164           var mins = date.getMinutes();
 165           var seconds = date.getSeconds();
 166           var mdegree = mins * 6 + (seconds / 10);
 167           var mrotate = "rotate(" + mdegree + "deg)";
 168           $("#min").css({"-moz-transform" : mrotate,
 169                          "-webkit-transform" : mrotate});
 170           var m1 = Math.floor(mins / 10);
 171           var m2 = mins % 10;
 172           $("#m1").css({"content" : "url(" + digit_images[m1] + ")"});
 173           $("#m2").css({"content" : "url(" + digit_images[m2] + ")"});
 174         }
 175         updateMinutes();
 176         setInterval(function(){updateMinutes();}, 3000);
 177
 178         // Rotate hour hand and set hours.
 179         function updateHours() {
 180           var date = new Date();
 181           var hours = date.getHours();
 182           var mins = date.getMinutes();
 183           var hdegree = hours * 30 + (mins / 2);
 184           var hrotate = "rotate(" + hdegree + "deg)";
 185           $("#hour").css({"-moz-transform" : hrotate,
 186                           "-webkit-transform" : hrotate});
 187           if (hours > 12) {
 188             hours = hours - 12;
 189           }
 190           if (hours <= 0) {
 191             hours = 12;
 192           }
 193           var h1 = Math.floor(hours / 10);
 194           var h2 = hours % 10;
 195           $("#h1").css({"content" : "url(" + digit_images[h1] + ")"});
 196           $("#h2").css({"content" : "url(" + digit_images[h2] + ")"});
 197         }
 198         updateHours();
 199         setInterval(function(){updateHours();}, 10000);
 200
 201         function updateDate() {
 202           var date = new Date();
 203           var day = date.getDate();
 204           var d1 = Math.floor(day / 10);
 205           var d2 = day % 10;
 206           $("#d1").css({"content" : "url(" + digit_images[d1] + ")"});
 207           $("#d2").css({"content" : "url(" + digit_images[d2] + ")"});
 208           $("#dd1").css({"content" : "url(" + digit_images[d1] + ")"});
 209           $("#dd2").css({"content" : "url(" + digit_images[d2] + ")"});
 210           var dow = date.getDay();
 211           $("#dow").css({"content" : "url(" + day_images[dow] + ")"});
 212           var month = date.getMonth();
 213           $("#mm").css({"content" : "url(" + month_images[month] + ")"});
 214         }
 215         updateDate();
 216         setInterval(function(){updateDate();}, 10000);
 217       });
 218   </script>
 219 </head>
 220 <body>
 221   <div style="height:775px; float:none">
 222   <ul id="clock">
 223      <div id="txt">
 224        <table style="background-color:#999999" border>
 225          <td><img src="0.png" height=26 id="d1" class="digit"></td>
 226          <td><img src="1.png" height=26 id="d2" class="digit"></td>
 227        </table>
 228      </div>
 229      <li id="sec"></li>
 230      <li id="hour"></li>
 231      <li id="min"></li>
 232      <li><div id="analog">
 233          <center>
 234          <table style="background-color:#999999;height:80px;" border>
 235            <tr>
 236            <td><img src="clockimg/2.png" id="h1" class="digit"></td>
 237            <td><img src="clockimg/3.png" id="h2" class="digit"></td>
 238            <td style="border: none">&nbsp;&nbsp;</td>
 239            <td><img src="clockimg/4.png" id="m1" class="digit"></td>
 240            <td><img src="clockimg/5.png" id="m2" class="digit"></td>
 241            <td style="border: none">&nbsp;&nbsp;</td>
 242            <td><img src="clockimg/6.png" id="s1" class="digit"></td>
 243            <td><img src="clockimg/7.png" id="s2" class="digit"></td>
 244            </tr>
 245          </table>
 246          <br>
 247          <table style="background-color:#999999;height:80px;" border>
 248            <tr>
 249            <td><img src="clockimg/sun.png" id="dow" class="digit"></td>
 250            <td style="border: none">&nbsp;&nbsp;</td>
 251            <td><img src="clockimg/8.png" id="dd1" class="digit"></td>
 252            <td><img src="clockimg/9.png" id="dd2" class="digit"></td>
 253            <td style="border: none">&nbsp;&nbsp;</td>
 254            <td><img src="clockimg/jan.png" id="mm" class="digit"></td>
 255            </tr>
 256          </table>
 257          </center>
 258          </div></li>
 259   </ul>
 260   </div>